Next.js에서 useEffect와 "use client" 지시문 활용법 완벽 가이드

Next.js에서 useEffect와 "use client" 지시문 활용법 완벽 가이드

안녕하세요. 파파대니입니다.

Next.js 13 이상에서는 useEffect를 사용하는 경우 "use client" 지시문을 추가해야 하는 상황과 그렇지 않은 상황이 구분됩니다.

아래에서 자세히 설명하겠습니다.

 

1. use client 지시문이 필요한 경우

useEffect를 사용하는 컴포넌트가 서버 컴포넌트 안에 정의되었을 경우, Next.js는 기본적으로 해당 컴포넌트를 클라이언트 컴포넌트로 전환하기 위해 "use client" 지시문을 요구합니다.

 

이유

• Next.js 13에서는 기본적으로 페이지와 컴포넌트가 서버 컴포넌트로 작동합니다.
• useEffect는 클라이언트 사이드에서만 작동하므로, 서버 컴포넌트에서 사용하려면 해당 컴포넌트를 명시적으로 클라이언트 컴포넌트로 정의해야 합니다.

예시

// 필요한 경우
"use client";

import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    console.log("This runs on the client only");
  }, []);

  return <div>Hello Client!</div>;
}

---

 

2. use client 지시문이 필요하지 않은 경우

다음과 같은 상황에서는 "use client"를 추가하지 않아도 됩니다.

• CSR 페이지에서만 작동하는 파일 (pages 디렉토리 하위 파일, 즉 앱 라우터를 사용하지 않는 경우):
  • Next.js 12 또는 이전 버전에서는 기본적으로 모든 페이지와 컴포넌트가 클라이언트에서 렌더링 되므로 useEffect를 사용할 때 use client 지시문이 필요하지 않습니다.
  • pages 디렉토리는 앱 디렉토리와 달리 서버/클라이언트 컴포넌트 구분이 없습니다.

예시

// pages/example.js (Next.js 12 또는 pages 디렉토리 기반)
import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    console.log("No 'use client' needed in the pages directory");
  }, []);

  return <div>Hello Client!</div>;
}

 

 

---

3. useEffect와 use client의 관계 요약

상황	필요 여부	설명
App Router에서 클라이언트 컴포넌트	필요	useEffect 사용 시 클라이언트 전용임을 명시해야 합니다.
Pages Router에서 컴포넌트	불필요	기본적으로 모든 페이지가 클라이언트에서 렌더링됩니다.
App Router에서 서버 컴포넌트	필요	서버 컴포넌트에서 클라이언트 기능(useEffect) 사용하려면 명시적으로 지정해야 합니다.
"use client"가 이미 정의된 컴포넌트	불필요	상위 레벨에서 이미 클라이언트 컴포넌트로 지정되었으므로 추가할 필요가 없습니다.

 

---

추가 주의사항

1. "use client"는 컴포넌트의 최상단에만 작성할 수 있습니다.
   • 지시문은 코드의 첫 줄에 있어야 합니다.
   • 다른 지시문과 함께 사용할 경우, "use client"가 첫 번째로 와야 합니다.
2. "use client"의 과도한 사용을 피하세요.
   • 클라이언트 전용 코드만 포함할 경우에만 사용하세요.
   • 서버 컴포넌트에서 가능한 한 클라이언트 상태와 의존성을 줄이는 것이 성능 최적화에 유리합니다.
3. App Router에서는 기본적으로 서버 렌더링이 적용됩니다.
   • 필요한 부분만 클라이언트 컴포넌트로 전환하여 서버 부하를 줄이고 성능을 최적화하세요.

---

 

상황에 따라 "use client"를 사용하시기 바랍니다.

감사합니다.

 

 

⬇️ 참고하면 좋은 글 ⬇️

 

CSR, SSR, SSG: Next.js 렌더링 방식 이해와 활용법

CSR, SSR, SSG: Next.js 렌더링 방식 이해와 활용법