use client 경계 점검

"use client"

파일 경계 하나가 하위 트리를 바꾼다

클라이언트 선언은 그 파일의 import 범위, 브라우저 API, props 직렬화 조건을 함께 바꿉니다.

선언 위치

상호작용이 필요한 가장 작은 파일에 둔다

전파 범위

하위 import가 클라이언트 번들로 들어갈 수 있다

데이터 전달

함수, 클래스 인스턴스 대신 직렬화 가능한 값만 넘긴다

필요성

hook, event, browser API가 없으면 서버 컴포넌트로 남긴다.

위치

큰 화면 전체가 아니라 버튼, form, toggle 같은 작은 섬에 둔다.

props

서버에서 만든 HTML 결과나 plain data만 전달한다.

bundle

무거운 라이브러리와 서버 전용 모듈이 함께 딸려오지 않는지 본다.

코드 신호	클라이언트 선언 필요	주의할 점
useState, useEffect	브라우저에서 상태가 바뀌므로 클라이언트 컴포넌트가 필요하다.	상위 layout 전체에 선언하지 말고 상태 영역만 분리한다.
onClick, onChange	이벤트 핸들러는 직렬화되지 않으므로 클라이언트 파일 안에 둔다.	서버 컴포넌트는 결과 HTML이나 data를 children으로 넘긴다.
window, document	브라우저 전용 API는 서버 렌더 중 실행할 수 없다.	렌더 직후 값 차이로 hydration 불일치가 나지 않게 한다.

작게 선언

경계가 작을수록 JS 전송량과 hydration 범위가 줄어든다.

직렬화

Date, function, class instance는 전달 전 표현을 정리한다.

import 점검

서버 전용 모듈이 클라이언트 하위 트리에 섞이지 않게 한다.