Next.js useEffect 오류 해결: 'use client' 사용 시기 이해
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

Next.js에서 useEffect 오류 해결: "use client" 사용 시기 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js 13+ 버전을 사용하는 React 개발자 (중간 수준)

핵심 요약

  • Next.js 13+ App Router에서는 모든 컴포넌트가 기본적으로 Server Component로 처리되어 useEffect, window, localStorage 등 클라이언트 전용 기능 사용 시 "use client" 선언이 필수
  • "use client"는 클라이언트에서만 실행되는 로직(이벤트, DOM 조작, 상태 관리)이 필요한 경우에만 사용해야 함
  • Server Component는 비동기 데이터 로딩, 계산 등 서버에서 처리하는 역할을 수행하며, 불필요한 JS 전송을 줄여 성능 향상 가능

섹션별 세부 요약

  1. Next.js 13+에서의 기본 동작
  • useEffect 사용 시 Module not found: Can't resolve 'fs' 또는 tls 오류 발생
  • 이는 App Router 기반의 Server Component가 기본값이기 때문
  • 서버에서 실행되는 Server Component는 useEffect, window, localStorage 등의 클라이언트 전용 기능 사용 불가
  1. "use client" 사용 시기
  • 클라이언트 전용 기능이 필요한 경우: useState, useEffect, useRef, window, localStorage, 이벤트/애니메이션 처리
  • "use client" 선언 예시:

```js

"use client";

import { useEffect } from "react";

export default function Tracker() {

useEffect(() => { console.log("서버에서 실행 불가"); }, []);

}

```

  1. Server Component 사용 권장 사항
  • 불필요한 "use client" 사용은 성능 저하 원인
  • Server Component는 데이터 로딩, 계산, 렌더링에 적합
  • 예시:

```js

export default async function Dashboard() {

const data = await fetchData();

return

{data.title}
;

}

```

  1. "use client" 대안: 비동기 처리
  • setTimeout 대신 async/await 사용 가능:

```js

export default async function DelayedComponent() {

await new Promise(res => setTimeout(res, 1000));

return

1초 후 표시
;

}

```

결론

Next.js 13+ App Router에서 useEffect 오류는 Server Component 기본 동작 때문임. "use client"는 클라이언트 전용 로직이 필요한 경우에만 사용하고, Server Component로 처리할 수 있는 작업은 서버에서 수행해 성능 최적화를 추천.