Next.js "Use client" 사용법

✅ "use client"란?

"use client"는 Next.js 13 이상에서 도입된 새로운 지시어로,
그 파일(또는 컴포넌트)이 **클라이언트 컴포넌트(Client Component)**임을 명시하는 선언입니다.

---

🔍 왜 생겼을까?

Next.js 13부터는 app/ 디렉터리에서 기본적으로 모든 컴포넌트가 **서버 컴포넌트(Server Component)**로 간주됩니다.

• 서버 컴포넌트는 HTML만 렌더링하고, 브라우저에서 JS 실행은 안 됩니다.
• 따라서 useState, useEffect, useContext, window 등 클라이언트 전용 API를 쓸 수 없습니다.

이런 클라이언트 전용 기능을 쓰려면 파일 상단에 👇

"use client"

이렇게 명시해줘야 클라이언트 컴포넌트로 바뀝니다.

 

💡 예를 들어...

// ❌ 서버 컴포넌트
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0); // ❌ 서버 컴포넌트에선 에러
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

👇 이럴 땐 꼭 이렇게:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0); // ✅ 이제 사용 가능
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

⚠️ 안 써도 되는 경우

• 이미 use client가 선언된 컴포넌트에서 import되는 자식 컴포넌트는 따로 선언할 필요 없음.
  
  

기본적으로 화면을 구성할때 src/app 하단의 경로의 page.tsx 에서 화면을 그린다. 이쪽은 서버사이드 랜더링이 된다.

하지만 클라이언트 단에서 이용가능한 state 등을 사용할때는 서버사이드 랜더링에 넣는 것이 아니라 따로 컴포넌트를 빼서 해당 로직을 구현하고 구현한 컴포넌트 위에 "use client"를 정의하고 만들어야 한다. 이후 만들어진 컴포넌트를 app 하단의 pages에 넣는 식으로 구현하면 된다.

참고로 중복으로 사용될만한 서버사이드의 함수들은 클라이언트 함수를 사용하는 컴포넌트 상에서 hook으로서 사용을 하고 있는데 만약 해당 hook들이 "use client"를 상속받은 컴포넌트 들에서만 쓰인다면 "use client"를 굳이 쓰지 않아도 된다. 

또한 만약 서버사이드랜더링이 필요한 곳에 "use client"를 쓰면 에러가 나기때문에 해당 부분은 제외시켜야한다.