use client;

use client;

서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)를 명확하게 구분

 

Next.js 13부터 도입된 App Router (app/ 디렉터리 기반)에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트(Server Component)로 동작

 

일반적으로 컴포넌트가 서버에서 렌더링되고,

클라이언트 측에서는 HTML과 필요한 데이터를 받아 화면에 표시

 

 

클라이언트에서 실행해야 하는 컴포넌트는 "use client"; 선언 필요

 

클라이언트 컴포넌트가 필요한 경우:

• useState, useEffect, useContext 등 React Hooks 사용 시
• window, document, localStorage 같은 브라우저 API 사용 시
• onClick, onChange 같은 이벤트 핸들링 시

use client; 선언하지 않고 react hook을 사용하려고 할 경우 발생되는 오류

 

성능 최적화를 위해 use client;를 남발하지 말자