Client Component

클라이언트 컴포넌트 경계

use client 선언, 서버와 클라이언트 컴포넌트 경계, 서버 컴포넌트 조합 방식을 책임 기준으로 구분합니다.

use client

브라우저 실행 선언

해당 파일과 그 하위 import가 클라이언트 번들에 포함됩니다.

Hooks

상태와 이벤트

useState, useEffect, onClick 같은 기능은 클라이언트 컴포넌트에서 다룹니다.

경계

최소 범위 유지

페이지 전체가 아니라 상호작용이 필요한 작은 컴포넌트만 경계로 만듭니다.

클라이언트 경계 점검

use client는 편리하지만 번들 범위를 넓힌다

파일 상단 선언 하나가 하위 의존성까지 클라이언트로 보내므로 데이터 조회는 서버 컴포넌트에 남기고 이벤트 처리만 분리합니다.

선언 기준

필요사용자 입력, 로컬 상태, 브라우저 API가 있으면 선언합니다.
불필요단순 데이터 표시와 서버 조회는 서버 컴포넌트로 둡니다.
전달서버에서 가져온 직렬화 가능한 값을 props로 넘깁니다.