use client 지시어 활용

1

클라이언트 경계 판단

App Router 컴포넌트는 기본적으로 서버에서 렌더링되므로 상태, 이벤트 핸들러, 브라우저 API가 필요한 파일만 경계로 올립니다.

2

'use client' 사용법

선언은 import보다 위에 두고, 서버 컴포넌트가 데이터를 가져온 뒤 필요한 props만 클라이언트 컴포넌트로 내려보냅니다.

3

'use client'가 없는 경우 vs. 있는 경우

서버 컴포넌트는 DB 접근과 async 데이터 로딩에 유리하고, 클라이언트 컴포넌트는 클릭, 입력, localStorage 접근을 맡깁니다.

4

'use client' 사용 시 고려사항 및 최적화

상위 layout에 선언하면 하위 UI가 모두 브라우저 번들로 이동하므로 버튼, 폼, 토글처럼 상호작용이 있는 잎 노드에 가깝게 둡니다.