NextJs의 use client

"use client"는 Next.js 13 이상에서 도입된 React Server Components (RSC) 환경에서 특정 컴포넌트를 클라이언트 컴포넌트로 명시하기 위해 사용하는 지시문입니다.

✅ 사용 이유 한줄 요약:

서버에서 렌더링되는 기본 동작을 클라이언트에서 실행되는 컴포넌트로 바꾸기 위해 사용합니다.

🔍 배경 설명

Next.js 13부터 app/ 디렉토리에서는 기본적으로 서버 컴포넌트로 동작합니다.
서버 컴포넌트는 다음과 같은 특징이 있습니다:

브라우저에 자바스크립트가 전달되지 않음 (렌더링은 서버에서)
useState, useEffect 등 클라이언트 전용 훅 사용 불가
인터랙션/이벤트 핸들링 불가능

🎯 그래서 `"use client"`는 언제 필요할까?

다음과 같은 경우에 사용합니다:

상황 이유 useState, useEffect, useRef 등 사용 서버 컴포넌트에서는 작동하지 않기 때문 클릭, 입력 등 브라우저 이벤트 처리 서버에서는 브라우저 이벤트를 받을 수 없기 때문 localStorage, window, document 사용 브라우저 전용 객체이기 때문

📌 예시

// app/components/Counter.tsx
"use client";

import { useState } from "react";

export default function Counter() {
    const [count, setCount] = useState(0);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

이 컴포넌트는 useState를 사용하고 있기 때문에 반드시 "use client" 선언이 있어야 합니다.
또한 onClick은 브라우저에서 동작하기때문에 "use client" 선언이 필요함

📎 주의사항

"use client"는 파일 최상단에 가장 먼저 있어야 합니다.
부모 컴포넌트가 서버 컴포넌트라도 자식에 "use client"가 있으면 해당 자식은 클라이언트 컴포넌트로 작동합니다.
app/ 디렉토리 구조에서만 사용됩니다 (pages/ 디렉토리에선 필요 없음).

✅ 요약

기본은 서버 컴포넌트, 필요 시 "use client"로 클라이언트 전환
React 훅, 브라우저 API, 이벤트 핸들링을 위해 필요
성능 최적화를 위해 가능한 최소한의 컴포넌트에만 사용