React에서 useEffect 안에서 setState 하면 무한 루프가 발생하는 이유와 해결법

Question

API 데이터를 가져와서 state에 저장하려는데 무한 렌더링이 발생합니다.const [items, setItems] = useState([]) useEffect(() => { fetch('/api/items').then(r => r.json()).then(setItems) }, [items]) // items가 바뀌면 다시 fetch → 또 바뀜 → 무한루프

김영삼 · Accepted Answer

의존성 배열에 items를 넣으면 setItems → items 변경 → useEffect 재실행 → 무한루프입니다.// 해결: 빈 배열 = 마운트 시 1회만 useEffect(() => { fetch('/api/items').then(r => r.json()).then(setItems) }, []) // ← 빈 배열! // 특정 조건에서만 재호출하려면 useEffect(() => { fetch(`/api/items?category=${category}`) .then(r => r.json()).then(setItems) }, [category]) // category가 바뀔 때만규칙: effect 안에서 변경하는 state를 의존성 배열에 넣지 마세요.

테크리드지망 · Answer

정리가 너무 깔끔해요. 북마크했습니다. 감사합니다!

댓글 2