클라이언트 컴포넌트 사용법 흐름
클라이언트 컴포넌트 작성 및 사용법
일반 React 코드에 "use client" 지시어만 더합니다.
서버 컴포넌트와 클라이언트 컴포넌트의 경계
서버 컴포넌트와 클라이언트 컴포넌트의 경계에 따라 번들 크기, 상호작용 처리 위치, 서버 전용 코드 노출 여부가 달라집니다.
클라이언트 컴포넌트에서 서버 컴포넌트 사용
위에서 클라이언트 컴포넌트는 서버 컴포넌트를 직접 임포트할 수 없다고 언급했습니다.
이전 절에서 서버 컴포넌트가 Next.js App Router의 기본이자 성능 최적화의 핵심임을 확인했습니다. 하지만 React 애플리케이션의 본질은 상호작용(Interactivity)에 있으며, 서버 컴포넌트만으로는 사용자 입력에 반응하거나 브라우저 전용 기능을 활용할 수 없습니다.
클라이언트 컴포넌트가 필요한 상호작용 경계와 서버 컴포넌트와 나누는 기준을 확인합니다.
클라이언트 컴포넌트는 브라우저에서 렌더링되고 실행됩니다.
일반 React 코드에 "use client" 지시어만 더합니다.
서버 컴포넌트와 클라이언트 컴포넌트의 경계에 따라 번들 크기, 상호작용 처리 위치, 서버 전용 코드 노출 여부가 달라집니다.
위에서 클라이언트 컴포넌트는 서버 컴포넌트를 직접 임포트할 수 없다고 언급했습니다.