Antigravity Agent
66 lines
2.5 KiB
Markdown
66 lines
2.5 KiB
Markdown
---
|
|
id: react-useeffect-pitfalls
|
|
title: React useEffect 함정 (Pitfalls)
|
|
category: Coding
|
|
status: draft
|
|
source_trust_level: B
|
|
verification_status: conceptual
|
|
created_at: 2026-05-09
|
|
updated_at: 2026-05-09
|
|
tags: [react, hooks, useEffect, side-effects, vibe-coding]
|
|
tech_stack: { language: "TypeScript / React 18+", applicable_to: ["Web", "React Native"] }
|
|
applied_in: []
|
|
aliases: [useEffect dependency, effect cleanup, stale closure]
|
|
---
|
|
|
|
# React useEffect 함정
|
|
|
|
> useEffect 는 "이 effect 가 어떤 값에 의존하는가" 와 "언제 cleanup 해야 하는가" 두 질문에 답할 때만 쓴다. 동기화 도구지 lifecycle 후크가 아니다.
|
|
|
|
## 📖 핵심 개념
|
|
- useEffect 는 **외부 시스템과의 동기화** (DOM, network, subscription, timer) 도구.
|
|
- 의존성 배열 = effect 가 다시 실행되어야 하는 조건.
|
|
- StrictMode 에서 의도적으로 두 번 실행 → cleanup 누락 즉시 노출.
|
|
|
|
## 💻 코드 패턴
|
|
|
|
```ts
|
|
// ✅ subscription — cleanup 필수
|
|
useEffect(() => {
|
|
const sub = api.subscribe(setData);
|
|
return () => sub.unsubscribe();
|
|
}, [api]);
|
|
|
|
// ✅ AbortController 로 stale fetch 방지
|
|
useEffect(() => {
|
|
const ac = new AbortController();
|
|
fetch(`/api/users/${id}`, { signal: ac.signal })
|
|
.then(r => r.json()).then(setUser).catch(e => { if (e.name !== 'AbortError') throw e; });
|
|
return () => ac.abort();
|
|
}, [id]);
|
|
```
|
|
|
|
## 🤔 의사결정 기준
|
|
| 상황 | useEffect | 다른 도구 |
|
|
|---|---|---|
|
|
| 외부 동기화 (DOM event, subscription, API) | ✅ | — |
|
|
| props/state 에서 파생 값 계산 | ❌ | 그냥 변수 / useMemo |
|
|
| 이벤트 핸들러 안에서 일어날 일 | ❌ | onClick 안에서 직접 |
|
|
| 한 번만 실행 (mount 시) | StrictMode 두 번 실행 가정 | useRef 가드 + 명시적 cleanup |
|
|
|
|
## ❌ 안티패턴
|
|
- **빈 deps 배열로 "componentDidMount 흉내"**: StrictMode 에서 두 번. cleanup 안 짜면 leak.
|
|
- **state 를 effect 에서 다른 state 로 derive**: 렌더 → effect → setState → 재렌더. 그냥 변수로 계산.
|
|
- **deps 누락**: stale closure. ESLint `react-hooks/exhaustive-deps` 켜기.
|
|
- **객체/배열 리터럴을 deps**: 매 렌더 새 참조 → 무한 루프. useMemo/useCallback or primitive 로.
|
|
- **async 함수를 effect 직접**: cleanup 못 받음. 안에서 IIFE 또는 별도 함수.
|
|
|
|
## 🤖 LLM 활용 힌트
|
|
- "effect 가 외부 시스템 동기화인지, 단순 derived value 인지 판단해라" 라고 명시.
|
|
- cleanup 항상 요청.
|
|
- exhaustive-deps lint 가정.
|
|
|
|
## 🔗 관련 문서
|
|
- [[React_useMemo_When_Not_To]]
|
|
- [[React_Strict_Mode_Effects]]
|