ComponentDesign.md

좋은 컴포넌트 설계

컴포넌트란?

• 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

좋은 컴포넌트 설계 방법

재사용성과 범용성

컴포넌트 설계의 핵심은 재활용이다. 즉, 재사용성과 범용성을 갖춘 컴포넌트를 만들어야 한다. 기능만 동작하거나 하나의 UI만을 대체하는 용도가 아니라 몇 번이고 다시 쓰고, 어디에서든 가져다 쓸 수 있게 설계해야 한다.

관심사 분리 및 단일 책임 설계

Input		Function		Output
props	➔	Component (with state)	➔	JSX

컴포넌트는 위에서 재사용이 가능한 각가의 독립된 모듈이라고 했다. 하지만 컴포넌트를 단순하게 봐보자. props를 받고 JSX를 return 하는 함수이다. 함수를 만들 때, 우리가 가장 중요하게 생각하는 것은 기능이다. 그러나 함수가 하나의 역할만은 하는 것도 그 못지 않게 굉장히 중요하다. 마찬가지로 컴포넌트도 한 가지의 역할만을 수행해야 한다. 동일한 props를 받으면 동일한 return 값을 내어주는 식으로 설계가 되어야 한다. 로직을 잘 나누고 역할을 잘 정의해서 컴포넌트를 만들면 코드가 너무 광범위한 역할을 수행하고 복잡해지는 걸 방지해 준다. 단일 책임을 가지는 순수 컴포넌트들은 테스트하기 좋고 가독성도 좋다. 이러한 단일 책임을 가지는 순수 컴포넌트들을 만들기 위해서는 프레젠테이션 컴포넌트(props만 받아서 렌더링 해주는)와 모델(hooks)로 설계하는 방법이 있다. 이는 컴포넌트에서 로직을 깔끔하게 분리 가능하고, 로직의 재활용성과 가독성을 향상시킨다. 즉, 관심사를 분리시킬 수 있다.

외부에 제어 위임

컴포넌트의 재사용성과 유연성을 위해서는 제어를 외부에 위임해야 한다. 제어를 외부에 위임한 컴포넌트들은 비즈니스 로직을 맡는 컴포넌트에 import해서 재사용이 가능하다. 재사용이 가능한 부분들은 따로 다 나눠서 컴포넌트로 만들거나 hooks 로직에 담으면 더 좋은 컴포넌트를 만들 수 있다. 그러나 제어를 위임하면 할수록 위임한 코드를 사용 하는 코드에 대한 이해 난이도가 높아가고, 가독성이 떨어지게 된다. 위임과 사용 용이성의 트레이드오프를 잘 생각해야 한다.

제어 위임	재사용성	유연성	이해난이도	가독성
많음	높음	높음	높음	낮음
적음	낮음	낮음	낮음	높음

성능 고려

리액트를 사용하는 이유 중에 하나는 virtual DOM에 의한 변경된 부분만이 렌더링 되는 것이다. 그렇다면 컴포넌트는 언제 리렌더링이 일어나는지 아는가? 컴포넌트는 기본적으로 state setter가 호출되면 리렌더링이 일어난다. 즉, state가 변경될 때 컴포넌트가 다시 렌더링 된다는 것이다. 하나의 state에 여러 개의 컴포넌트가 의존한다고 생각해보자. 그렇다면 state가 변경됨에 따라 여러 컴포넌트가 다시 렌더링 되야 할 것이고 이는 곧 성능의 저하를 의미한다. 그러므로 우리는 성능을 위해 state와 이를 변경하게 만들 props를 최대한 변경하지 않을 수 있어야 한다.

정리

우리가 새로운 함수나 객체를 만들 때처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙이다. 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다.

참고

• 리액트 설계 가이드