when to break up a component into multiple components

컴포넌트를 여러개로 나눠야할 때를 요약해보자.

1개의 컴포넌트로 앱을 작성한다면.. 다음 문제가 발생한다.

1. 성능저하. 상태 변화가 하나라도 일어나면 앱 전체를 리렌더링

2. 상태관리 어려움. 수많은 이벤트 핸들러로 관리 및 디버깅 어려움.(이 부분은 관심사 분리의 장점이다)

3. 엣지 케이스 테스트 어려움. 격리된 테스트 하기 어려움.

4. 여러명과 개발하기 어려움

5. 선언적 컴포넌트 안에서

위와 같은 이유로 컴포넌트를 나눠 작성해야한다.

컴포넌트를 나누는 좋은 방법/패턴에 대한 질의응답

위의 답변을 요약하자면

"미리 나누지 말고 위 문제에 직면하면 나눠도 된다."

단일 컴포넌트를 여러 컴포넌트로 나누는 일은 "추상"이라고 부른다.

추상은 멋지지만 모든 추상은 비용이 따른다

중복은 잘못된 추상보다 훨씬 저렴하다 - Sandi Metz

저자는 컴포넌트의 render 메서드가 길어져도 개의치 않는다. JSX는 js 표현식의 모음이다. 또한, 컴포넌트를 작은 크기로 나눠 이곳저곳에 props drilling을 하지 않고 render를 유지하는게 엄청 잘못된 것은 아니다.

결론

문제가 발생하기 전까지 미리 컴포넌트를 작게 나누지 말자. 즉, 성급하게 컴포넌트를 추상화 하지 말자. 필요할 때 나누자.