use client

use client 번들 영향

지시어의 역할, 선언 방법, 없는 경우와 있는 경우의 차이, 최적화 기준을 한 화면에 정리합니다.

없을 때

서버 컴포넌트 기본값

데이터 조회와 정적 UI 표시에 유리하지만 브라우저 이벤트를 직접 다룰 수 없습니다.

있을 때

브라우저 상호작용 허용

useState, useEffect, onClick, window 접근처럼 브라우저 런타임이 필요한 코드를 이 경계 안에 둡니다.

줄이기

경계 최소화

페이지 전체보다 버튼, 폼, 탭처럼 작은 단위에 선언합니다.

최적화

선언 위치가 클라이언트 번들 크기 결정

상위 컴포넌트에 선언하면 하위 UI가 넓게 클라이언트화될 수 있으므로 필요한 영역을 작게 잘라내야 합니다.

사용 전 질문

상태로컬 상태나 이벤트 핸들러가 정말 필요한가 확인합니다.
브라우저window, localStorage 같은 API를 쓰는지 봅니다.
대안서버 액션이나 서버 컴포넌트 props로 해결 가능한지 검토합니다.