이번엔 React의 특징 중 하나인 Component 기반에 대해 알아보자.
Component란??
컴포넌트란 프로그래밍에 있어 재사용 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트를 사용하게 되면 코드의 재사용이 쉽고 단위 테스트가 용이하며 디버깅이 쉬워지는 등의 여러 가지 장점을 가지고 있다. 그렇다면 React에서는 Component가 어떻게 사용되고 있을까?
React에서는 컴포넌트를
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
이라고 표현하였다. 즉, UI를 재사용할 수 있게 코드를 여러 조각으로 나는 것을 뜻한다. 그리고 props라는 입력을 받아 React 엘리먼트를 반환하여 화면에 표시한다. 컴포넌트는 React의 특징인 선언형을 만족하기 위해 개발자가 작성한 코드를 추상화하는 과정인 것 같다.
Component 작성 방법
리액트에서는 함수, 클래스 두 가지 방법을 통해 컴포넌트를 작성할 수 있다.
function Hello(props){
return <h1>Hello World! {props.name}</h1>;
}가장 간단한 방법은 위와 같이 JavaScript 함수를 사용하여 작성하는 것이다. 이 함수는 하나의 props인자를 받아 React Element를 반환하므로 유효한 React 컴포넌트이다.
class HelloWorld extends React.component {
render(){
return <h1>Hello World! {this.props.name}</h1>
}
}또한, 위와 같이 ES6 Class문법으로 작성할 수 있다. 리액트에서는 두 가지를 동일한 유형의 컴포넌트로 인식한다. 하지만 컴포넌트의 생명주기와 몇 가지 추가 기능의 차이가 있으므로 상황에 맞게 작성하는 연습이 필요하다.
좋은 컴포넌트 작성
좋은 컴포넌트란 무엇일까? React는 컴포넌트 기반의 라이브러리이기 때문에 좋은 컴포넌트를 작성하는 개발자가 좋은 리액트 개발자라는 말도 과언이 아닐 정도로 중요하다. 100명의 개발자가 같은 컴포넌트를 작성한다고 해도 모두 다른 코드를 작성하기 때문에 어떻게 작성하는 것이 최고인지는 아무도 모르지만 좋은 컴포넌트 작성을 위해 지켜야 할 원칙들을 알아보자.
1. 단일 책임 원칙(SRP)
단일 책임 원칙(Single Responsibility Principle)은 "하나의 객체는 하나의 책임을 담당하여 하나의 기능만 수행해야 한다." 라는 원칙을 말한다. 하나의 객체가 여러 가지 책임과 기능을 수행하게 될 경우 필연적으로 같은 객체 내에서 다른 역할을 수행하는 기능끼리 결합될 가능성이 높아진다. 유지보수 측면에서도 하나의 기능을 수정 또는 삭제하기 위해 다른 역할을 하는 기능도 같이 변경해야 하고 관련된 모든 기능을 테스트를 수행해야 할 경우가 생긴다. 이러한 상황을 방지하기 위해 SRP를 지키며 코드를 작성해야 하지만 책임이라는 범위가 사람마다 모두 다르기 때문에 평소 코드를 작성할 때 결합도, 응집도 등에 신경쓰며 개발하는 연습이 필요하다.
2. 재사용성 및 구성
작성된 UI나 로직을 다른 부분에서도 재사용가능하게 구성 요소를 설계해야한다. 좋은 재사용성을 가진 컴포넌트를 만들기 위해서는 Hook을 사용하여 UI와 로직을 분리하고 요소들을 추상화하고 컴포넌트를 작은 단위로 쪼개서 작성하여 합성 컴포넌트를 사용하여 큰 컴포넌트를 만드는 방법 등이 있다.
3. Props 및 상태 관리
Props를 통하여 데이터 및 구성 요소들을 전달하고, State를 통해 내부의 상태를 관리한다. 내부의 상태는 최소한으로 사용하고 사용자의 입력을 처리할 때는 제어 컴포넌트를 사용한다.
4. Immutability
상태를 업데이트 할때 항상 불변성을 유지한다. 예상치 못한 사이드 이펙트 혹은 버그가 발생할 수 있기 때문에 상태나 Props를 직접 변경해선 안된다.
5. 성능 최적화
불필요한 리렌더링, 함수의 재작성, 변수의 재선언을 방지하기 위해 React.memo, useCallback, useMemo와 같은 함수를 사용하여 성능을 최적화한다.
6. Testing
컴포넌트가 올바르게 작동하는지 확인할 수 있도록 테스트를 작성한다.
회고
위와같이 리액트에서 컴포넌트는 아주 중요한 위치를 가지고 있다. 좋은 컴포넌트를 작성하는 데에는 아주 많은 방법이 존재한다. 나도 아직 어떤 컴포넌트가 구조적으로 좋고 생산적인 컴포넌트인지는 모르겠다. 최소한 위의 원칙을 따르며 항상 최선을 생각하며 컴포넌트를 작성하는 연습을 해야겠다.