사용자 지정 컴포넌트의 컴포지션 활용, JSX의 개념 등

 

사용자 지정 컴포넌트로 컴포지션(합성)에 활용하기

 

리액트에서 사용자 지정 컴포넌트란 개발자가 작성한 재사용이 가능한 UI 조각이다. 이는 자바스크립트 함수나 클래스로 작성할 수 있으며, 컴포넌트의 이름은 관례에 따라 대문자로 시작해야 한다.

 

이 사용자 지정 컴포넌트는 다른 컴포넌트나 HTML의 요소와 함께 사용할 수 있다. 또한 일반적으로 이러한 컴포넌트는 다른 컴포넌트의 내부에 포함되며, 부모 컴포넌트는 자식 컴포넌트에 속성(props)을 통해 데이터를 전달할 수 있다.

 

이러한 사용자 지정 컴포넌트는 코드의 가독성과 유지보수성을 향상시키며, 코드 재사용성을 높이는 장점도 있다. 

사용자 지정 컴포넌트의 사용

위 이미지는 현재 리액트 수업을 진행하며 만들고 있는 연습용 웹페이지에 Card라는 사용자 지정 컴포넌트를 만들고 이를 함수형 컴포넌트로 구성했다. 함수에서는 부모(App.js)로부터 데이터를 받도록 props를 사용했고, CSS의 card 선택자를, 부모 데이터의 클래스 선택자가 부여된 곳에서 모두 사용할 수 있도록 card와 props.className을 묶어서 classes 상수에 저장했다.

 

반환문에서는 classes 상수를 사용하여 div 요소의 className 속성값을 설정하고 props.children을 렌더링하도록 했다. 여기서 props.children은 해당 컴포넌트가 포함된 자식 컴포넌트를 구현하는 데 사용된다. 또한, 이 경우 Card 컴포넌트가 부모가 되며 이를 사용하는 컴포넌트가 자식 컴포넌트가 된다.

Card 컴포넌트를 사용하는 다른 컴포넌트들

이렇게 만든 Card 컴포넌트를 위 이미지에서처럼 다른 컴포넌트에 사용해보았다. 원래는 Card 대신 div 요소가 있었다. 위에서 Card 컴포넌트는 className을 통해 스타일이 적용되도록 지정했고, props.children을 통해 부모 컴포넌트가 자식 컴포넌트를 포함하도록 했었다.

 

ExpenseItem 컴포넌트는 Card 컴포넌트를 구현하고, Card 컴포넌트에 expense-item 클래스선택자를 설정하여 Card에 적용된 css 스타일, expense-item에 적용된 css 스타일을 모두 포함하도록 했다. 

 

아래의 ExpenseAmount 컴포넌트에서도 마찬가지의 용도로 Card 컴포넌트를 사용했다.

Card 컴포넌트에 적용된 CSS 스타일

참고로 Card 컴포넌트에는 위 이미지와 같은 CSS 스타일이 포함되어 있다. 기존에 다른 클래스선택자에 부여되어 있던 효과 일부를 가져와서 card 선택자로 따로 만들어준 것이다.

 

JSX의 구체적 개념과 리액트가 작동하는 원리

JSX는 자바스크립트의 확장 문법으로서, 리액트에서 UI를 구성하는데 사용된다. JSX는 XML과 비슷한 구문을 가지며, HTML과 유사한 코드이기도 하다. 리액트에서 UI를 구성하는 데는 JSX를 사용하여 컴포넌트를 정의하고, 이를 조합하여 UI를 만들게 된다.

 

JSX는 Babel과 같은 컴파일러를 통해 일반 자바스크립트로 컴파일되며, React.createElement() 호출로 변환된다. 이 과정에서 JSX에 포함된 요소, 속성, 이벤트 등이 자바스크립트 객체로 변환된다. 

💡 Babel: 이는 자바스크립트 컴파일러로, 최신 버전의 자바스크립트 코드를 이전 버전의 호환 가능한 코드로 변환해준다. 즉 Babel은 ES6+ 코드를 이전 버전의 호환 가능한 코드로 변환해주며, 브라우저 간 호환성 문제를 해결해줄 수 있다. 
Babel은 트랜스파일러(Transpiler)라고도 불리며, 자바스크립트 코드를 변환하는데 사용되는 가장 인기있는 도구 중 하나이다.

 

이렇게 생성된 객체는 리액트 엔진이 가상 DOM을 구성하고, 이를 실제 DOM에 적용하여 사용자의 화면에 출력하게 된다.

 

컴포넌트 파일 구성 방법과 구성하는 이유

 

개발자가 만드는 컴포넌트 파일들은 한개 파일로 끝나지 않는다. 용도에 맞춰서 파일을 만들어 연결하여 사용하다보면 파일들이 많아져서 직접 만든 사람이 아니고서는 이게 무슨 파일인지 잘 모르게 된다.

 

그래서 파일을 용도에 맞춘 폴더별로 정리하게 되는데, 이렇게 하면 전체 프로젝트의 가독성이 좋아지게 된다.

컴포넌트 파일 정리

위 이미지는 컴포넌트 파일들을 두 개의 폴더에 정리한 모습이다. Card 컴포넌트를 제외하고는 모두 Expense가 붙어 Expenses에 넣어주고, UI에 해당하는 Card는 UI 폴더에 넣어보았다.

 

대체 함수 문법인 화살표 함수

 

화살표 함수는 자바스크립트의 또다른 함수 표현방법이다. 이는 선택사항이며, function을 사용하여 기존처럼 함수를 표현하는 것과 전혀 차이점이 없으며, 조금 더 짧다는 것 빼고는 다른 점이 없는 표현방법이다.

화살표 함수표현의 사용

위 이미지는 App.js 파일에 화살표 함수를 사용한 모습이다. 이를 위해 function 대신 상수 const를 적고 함수의 이름 뒤에 = () =>를 넣어 함수 표현을 끝냈다. 

 

내가 사용해보니 기존에 자동완성기능을 항상 쓰고있었어서 function을 쓰는 방법이 좀 더 와닿았다. 하지만 확실히 간소하다는 느낌은 받았다. 이 표현방법이 실무에서 자주 쓰일지는 모르겠지만, 나중에 표현방법을 헛갈리지 않도록 알아둬야할 필요가 있는 것 같다.