Container / Presentational Pattern

데이터를 가져오는 컨테이너와 순수하게 렌더링만 하는 표현 컴포넌트로 사용자 목록을 분리하세요.

API

type User = { id: number; name: string };

export function UserList(props: {
  users: User[];
  onSelect: (user: User) => void;
}): JSX.Element; // 표현 컴포넌트 (순수)

export function UserListContainer(props: {
  getUsers: () => Promise<User[]>;
  onSelect: (user: User) => void;
}): JSX.Element; // 컨테이너 (데이터 패칭)

동작

• UserList 는 받은 users 를 <li> 로 렌더하고 각 항목 클릭 시 onSelect(user) 호출.
• UserListContainer 는 마운트 시 getUsers() 호출 → 결과를 UserList 의 props로 내려준다. 로딩 중에는 Loading... 표시.

학습 포인트

• how to render (표현) vs what to render (컨테이너) 의 분리
• 표현 컴포넌트는 props만 받는 순수 함수 → 테스트가 쉽다
• 컨테이너는 비동기 데이터 흐름을 책임진다