판단 기준 안내

컴포넌트는 반복, 역할, 변경 이유가 갈라질 때 분리한다

화면을 무조건 작게 쪼개기보다 재사용되는 부분과 독립적으로 바뀌는 부분을 먼저 찾는다.

reuse 반복해서 쓰이는가?

버튼, 카드, 목록 아이템처럼 여러 위치에서 필요하면 분리한다.

role 역할이 선명한가?

검색 영역, 프로필 영역처럼 이름 붙이기 쉬운 단위는 후보가 된다.

change 따로 바뀌는가?

데이터나 상태 변화가 특정 영역에만 영향을 주면 나누기 좋다.

함수형 컴포넌트

함수가 props를 받고 JSX를 반환한다. Hooks와 함께 현대 React의 기본 선택지로 사용한다.

클래스형 컴포넌트

React.Component를 상속하고 render 메서드에서 JSX를 반환한다. 기존 코드 이해를 위해 구조를 알아둔다.

실전 선택 흐름

새 코드 함수형 컴포넌트로 시작하고 필요한 상태는 Hooks로 다룬다.
기존 코드 클래스형 컴포넌트는 읽고 유지보수할 수 있도록 기본 구조를 익힌다.
분리 보류 한 번만 쓰이고 역할이 작다면 먼저 한곳에 두고 중복이 보일 때 나눈다.

컴포넌트 핵심: 컴포넌트 이름은 그 UI의 역할을 설명하고, 재사용할 때 필요한 입력은 props로 드러난다.