Next.js

클라이언트 컴포넌트 사용법

이전 절에서 서버 컴포넌트가 Next.js App Router의 기본이자 성능 최적화의 핵심임을 배웠습니다. 하지만 React 애플리케이션의 본질은 상호작용(Interactivity)에 있으며, 서버 컴포넌트만으로는 사용자 입력에 반응하거나 브라우저 전용 기능을 활용할 수 없습니다.

서버 컴포넌트와 상호작용를 중심으로 클라이언트 컴포넌트 사용법의 판단 흐름을 읽습니다.

핵심 흐름

1

클라이언트 컴포넌트란 무엇인가요?

클라이언트 컴포넌트는 전통적인 React 컴포넌트와 동일하게 브라우저(클라이언트) 환경에서 렌더링되고 실행되는 컴포넌트입니다.

2

클라이언트 컴포넌트 작성 및 사용법

클라이언트 컴포넌트는 일반적인 React 컴포넌트와 동일하게 작성하지만, 파일 상단에 "use client" 지시어를 추가하는 것이 유일한 차이점입니다.

3

서버 컴포넌트와 클라이언트 컴포넌트의 경계

Next.js App Router에서 서버 컴포넌트와 클라이언트 컴포넌트가 함께 작동하는 방식은 매우 중요합니다.

4

클라이언트 컴포넌트에서 서버 컴포넌트 사용

위에서 클라이언트 컴포넌트는 서버 컴포넌트를 직접 임포트할 수 없다고 언급했습니다.