client component checklist

상호작용은 클라이언트로, 준비 작업은 서버에 남긴다

클라이언트 컴포넌트는 버튼과 폼의 이벤트를 살리지만, 선언 위치가 클라이언트 번들의 시작점이 된다는 점까지 함께 확인해야 합니다.

1

서버 화면 작성

페이지와 데이터 조회는 기본 서버 컴포넌트로 시작합니다.

2

이벤트 섬 분리

클릭, 입력, 브라우저 API가 필요한 부분만 새 파일로 뺍니다.

3

props 정리

서버에서 넘기는 초기 값은 JSON으로 표현 가능한 형태로 둡니다.

4

하이드레이션 확인

초기 HTML 위에 이벤트가 연결되는 범위가 예상과 맞는지 봅니다.

server to client

서버가 클라이언트를 import

서버 컴포넌트는 클라이언트 컴포넌트를 렌더링하고 초기 데이터를 props로 넘길 수 있습니다. 폼의 기본값이나 사용자 이름처럼 작은 값에 적합합니다.

children bridge

서버 결과를 children으로 전달

클라이언트 컴포넌트가 서버 컴포넌트를 직접 import하지 않고, 이미 렌더링된 서버 콘텐츠를 children 위치에서 토글하거나 감쌉니다.

hooks

훅이 있으면 client

useState, useEffect를 쓰는 파일은 지시어가 필요합니다.

browser

브라우저 API 분리

window, storage, media query 접근은 클라이언트 파일에 둡니다.

bundle

경계는 작게 유지

정적 마크업까지 클라이언트 하위로 끌고 가지 않도록 리프에 둡니다.