"use client" 는 언제 써야 하는걸까?!

 

React에서 use client가 필요한 경우와 불필요한 경우

React와 Next.js 환경에서 use client는 Server Components와 Client Components의 동작을 구분하기 위해 사용됩니다. 컴포넌트에 use client가 필요한지 여부는 해당 컴포넌트가 클라이언트 전용으로 동작해야 하는지 판단하여 결정됩니다.

---

use client가 필요한 경우

다음과 같은 상황에서는 컴포넌트에 use client를 선언해야 합니다:

1. 클라이언트 전용 코드

• 브라우저 API를 사용하는 경우 (window, document 등).
• React의 상태 관리 훅(useState, useEffect, useContext 등)을 사용하는 경우.

2. 동적 Import 사용

• Webpack의 require.context나 Next.js의 dynamic import를 사용하는 경우.
• require.context는 Webpack의 런타임 동적 로딩 기능으로, 서버 환경에서는 지원되지 않습니다.

3. DOM 및 스타일 작업

• 컴포넌트가 DOM 요소를 조작하거나 브라우저 환경에서만 실행되는 스타일 작업을 포함하는 경우.

use client가 불필요한 경우

다음과 같은 상황에서는 use client가 필요하지 않습니다:

1. 순수한 Server Components

• 컴포넌트가 서버에서 렌더링될 수 있는 정적 콘텐츠만 포함된 경우.
• React 훅이나 브라우저 API를 사용하지 않는 경우.

2. 정적 Import사용

• Import(require.context) 대신 파일을 정적으로 가져오는 경우.