use client는 어떻게 작동하는가

Next.js 13의 App Router 환경에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트 (SSR) 방식으로 작동한다.

서버 컴포넌트는 브라우저 환경이 아닌 서버에서 렌더링되며, React의 클라이언트 전용 훅들을 사용할 수 없다.

이러한 구조에서 클라이언트 컴포넌트를 사용하고 싶을 때 파일 최상단에 “use client”를 선언하게 된다.

1. “use client”를 선언하면 어떤 일이 일어날까?
   • Next.js는 컴포넌트 파일의 최상단에 "use client" 지시문이 있으면, 해당 파일을 클라이언트 번들에 포함 시킨다.
     • 해당 컴포넌트는 브라우저에서 실행
     • React의 클라이언트 전용 훅 사용 가능
     • DOM 이벤트(onClick등)를 사용 가능
     • SSR이 아닌 CSR로 전환된다.
   • 즉, "use client" 는 Next.js에게 “이 컴포넌트는 서버에서 처리하지 말고 클라이언트에서 처리하라”라는 명령을 내리는 역할을 한다.
2. 주의할 점
   • "use client" 는 반드시 가장 위에 위치해야한다. import문보다 위에
   • 불필요한 클라이언트 컴포넌트 사용은 번들 크기를 키우고 성능에 영향을 줄 수 있고, SSR로 작동하는 App Router를 사용하는 의미를 퇴색시킨다.