함수 컴포넌트의 렌더 책임 단위

책임 선택

카드, 버튼, 목록 행처럼 함께 바뀌는 UI 단위를 찾는다.

컴포넌트 밖에서 달라질 값과 이벤트 콜백을 props로 받는다.

현재 props와 내부 상태를 기준으로 화면 구조를 반환한다.

부모는 여러 컴포넌트를 배치하고 데이터 흐름을 연결한다.

Presentational

표시 중심 받은 값으로 UI를 그리며 비즈니스 규칙이 적음

재사용하기 쉬움

Container

데이터 연결 요청, 상태, 라우터 값을 하위 표시 컴포넌트로 전달

책임이 커지면 분리

Composition

children 조합 layout, card, modal처럼 내부 내용을 외부에서 받음

props drilling 완화 가능

Custom hook

로직 분리 UI가 아닌 상태·효과 로직을 함수로 추출

컴포넌트 대체가 아님

이름 컴포넌트와 일반 함수를 이름으로 구분할 수 있다.

책임 한 컴포넌트가 데이터 요청, 레이아웃, 세부 입력을 모두 떠안지 않는다.

props 부모가 내려준 값을 자식이 직접 수정하지 않는다.

조합 상속보다 children과 props 조합을 우선한다.