TUTORIAL
프레젠테이션/컨테이너 패턴
React 컴포넌트 분리 전략
럿지 AI 팀2025-01-1515분
관심사의 분리
Container
로직과 상태 관리
데이터 fetch, 이벤트 처리
Presentational
UI 렌더링만 담당
props로 데이터 수신
패턴 비교
역할
상태/로직렌더링상태
있음없음 (순수)Redux 연결
직접 연결연결 없음재사용성
낮음높음구조 예시
UserListContainer.tsx
→ useUsers() 훅 사용
→ loading, error 상태 관리
→ UserList에 데이터 전달
↓
UserList.tsx
→ props: users, onSelect
→ 순수 렌더링만 담당
→ 재사용 가능
장점
테스트 용이
UI와 로직 분리
재사용성
순수 컴포넌트
가독성
책임 분리
협업
병렬 작업 가능
현대적 대안
Hooks 등장 이후 Custom Hooks로 로직 분리 가능
하지만 큰 규모 프로젝트에서는 여전히 유용한 패턴
관련 태그
#presentational
#Tutorial
#Frontend
#Development