Next.js에서 'use client'를 사용하는 경우

use client

최신 버전인 Next.js 15 기준으로 이야기하겠다.

시작하기 전에..

기본적으로 Next.js 는 "서버 사이드 렌더링" 으로 렌더링이 된다.

리액트에서는 클라이언트 사이드 렌더링을 하는데, 이 부분에서 가장 큰 차이가 난다.

SSR / CSR 이 개념은 다음 글을 참고하자.

https://codingworld2002.tistory.com/216

SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링)

---

근데, 이때 "여러 가지" 경우로 인해 클라이언트 사이드 렌더링을 써야 하는 경우가 Next.js에 존재한다. 그 경우를 이 글에 작성할 것이다. 경우의 수는 다음과 같다.

---

✅ 'use client'를 반드시 사용하는 경우

1. React 훅을 사용할 때

• useState, useEffect, useContext 등 사용 시

'use client'

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

"훅"을 쓸 때는 무조건 선언해주어야 한다. 안 쓰면 에러 뜬다.

---

2. 브라우저 API를 사용할 때

• window, localStorage, navigator 등은 서버에서 존재하지 않음 → 클라이언트 컴포넌트로 처리해야 함

'use client'

useEffect(() => {
  const theme = localStorage.getItem('theme');
}, []);

서버에 없는 브라우저 API를 쓸 때에 선언해주어야 한다. 애초에 서버에 존재하지 않으니 렌더링이 안되기 때문이다.

---

3. 이벤트 핸들링이 필요한 컴포넌트

• onClick, onChange, onSubmit 등

'use client'

<button onClick={() => alert('clicked!')}>Click me</button>

가장 많이 쓰이는 "onClick"... 이거 쓸 때에는 무조건 선언해야 한다. (이벤트 핸들링)

---

4. 클라이언트 전용 상태 관리 라이브러리 사용 시

• 예: Recoil, Zustand, Jotai 등 상태 관리 라이브러리의 useXXX() 훅 사용 시

'use client'

import { useStore } from '../store';

const MyComponent = () => {
  const count = useStore((state) => state.count);
  return <div>{count}</div>;
};

근데 사실 Next.js 쓰면서 클라이언트 전용 상태 관리를 할 경우가 적기는 하다. (이거 안 하려고 Next.js 씀..)

---

5. Next.js 전용 클라이언트 훅 사용 시

• 예: useRouter(), usePathname(), useSearchParams() 등

'use client'

import { useRouter } from 'next/navigation';

const GoHome = () => {
  const router = useRouter();
  return <button onClick={() => router.push('/')}>Go Home</button>;
};

---

⚠️ 주의할 점

• use client는 파일 맨 위에 있어야 함.
• 컴포넌트 단위로만 사용 가능 (페이지 전체에 쓰지 말 것!)
• 너무 남발하면 성능 저하와 번들 사이즈 증가로 이어짐.

---

필요할 때만 쓰는 것이 핵심이다.

기능 없는 부분은 그냥 서버 사이드로 빠르게 열어주는 것이 포인트.

참고한 글 >

https://velog.io/@wotjr294/Next.js%EC%9D%98-use-client-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

Next.js의 'use client' 이해하기

---