미해결 개발 현상금 500P

React에서 useEffect 무한루프 문제가 발생합니다

리액트초보

Lv.4

20분 전 145 12

안녕하세요, React를 배우고 있는 초보 개발자입니다.

useEffect 훅을 사용할 때 무한루프가 발생하는 문제가 있습니다. 아래 코드를 봐주세요:

const [data, setData] = useState([]);
const [count, setCount] = useState(0);

useEffect(() => {
    fetchData().then(result => {
        setData(result);
        setCount(count + 1);
    });
}, [count]); // 이 부분에서 무한루프 발생

count를 의존성 배열에 넣으면 무한루프가 발생하고, 빼면 ESLint 경고가 나옵니다.

어떻게 해결해야 할까요? 도움 부탁드립니다.

#React #useEffect #hooks #무한루프

답변 3개

리액트마스터 채택된 답변 +700P 획득

Lv.18 · 15분 전

안녕하세요! 이 문제는 클로저와 의존성 배열의 이해가 필요합니다.

문제 원인: count가 변경될 때마다 useEffect가 실행되고, 내부에서 다시 count를 변경하므로 무한루프가 발생합니다.

해결 방법: 함수형 업데이트를 사용하세요:

useEffect(() => {
    fetchData().then(result => {
        setData(result);
        setCount(prev => prev + 1); // 함수형 업데이트
    });
}, []); // count 의존성 제거 가능

이렇게 하면 count의 이전 값을 참조하면서도 의존성 배열에서 제거할 수 있습니다.

추가로, 데이터를 한 번만 가져오려면 빈 의존성 배열 []을 사용하시면 됩니다.

리액트초보

Lv.4 10분 전

와 정말 감사합니다! 함수형 업데이트를 사용하니까 바로 해결됐어요! 🎉

리액트마스터

Lv.18 8분 전

도움이 되셨다니 다행이에요! 혹시 더 궁금한 점 있으시면 언제든 물어보세요 😊

개발자99

Lv.10 5분 전

추가로 useRef를 사용하면 렌더링 없이 값을 추적할 수도 있어요. 참고하세요!

프론트엔드러

Lv.12 · 18분 전

추가로 useCallback을 사용하는 방법도 있습니다:

const fetchAndUpdate = useCallback(() => {
    fetchData().then(result => {
        setData(result);
    });
}, []);

useEffect(() => {
    fetchAndUpdate();
}, [fetchAndUpdate]);

이렇게 하면 함수 참조가 안정적으로 유지됩니다.

코딩초보탈출

Lv.6 · 10분 전

저도 같은 문제를 겪었는데, 위 답변들이 도움이 많이 됩니다!

추가로 eslint-disable-next-line은 가급적 피하시는 게 좋습니다. 나중에 버그의 원인이 될 수 있어요.

React에서 useEffect 무한루프 문제가 발생합니다

알림