React 컴포넌트 합성과 재사용 패턴

컴포넌트를 합성해서 재사용성을 높이고, prop drilling이나 거대한 컴포넌트를 피하는 패턴들을 간단히 정리합니다.

1. Children 기반 합성

children과 렌더 props를 활용해 레이아웃과 로직을 분리하는 패턴을 예시와 함께 정리합니다.

2. Compound Components

<Select>, <Modal> 같은 컴포넌트를 compound 패턴으로 설계할 때의 인터페이스와 상태 관리 방식을 기록합니다.

3. 컨테이너/프리젠테이션 분리

데이터 패칭/비즈니스 로직과 UI를 나누는 기준과, React Query / 상태 관리 라이브러리와의 조합을 메모합니다.