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 전송을 줄여 성능 향상 가능
섹션별 세부 요약
- Next.js 13+에서의 기본 동작
useEffect
사용 시Module not found: Can't resolve 'fs'
또는tls
오류 발생- 이는 App Router 기반의 Server Component가 기본값이기 때문
- 서버에서 실행되는 Server Component는
useEffect
,window
,localStorage
등의 클라이언트 전용 기능 사용 불가
- "use client" 사용 시기
- 클라이언트 전용 기능이 필요한 경우:
useState
,useEffect
,useRef
,window
,localStorage
, 이벤트/애니메이션 처리 - "use client" 선언 예시:
```js
"use client";
import { useEffect } from "react";
export default function Tracker() {
useEffect(() => { console.log("서버에서 실행 불가"); }, []);
}
```
- Server Component 사용 권장 사항
- 불필요한 "use client" 사용은 성능 저하 원인
- Server Component는 데이터 로딩, 계산, 렌더링에 적합
- 예시:
```js
export default async function Dashboard() {
const data = await fetchData();
return
{data.title}
;
}
```
- "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로 처리할 수 있는 작업은 서버에서 수행해 성능 최적화를 추천.