리액트 useEffect 의존성 배열 질문 있습니다
useEffect 안에서 state를 업데이트하는데 계속 무한 루프가 돌아요. 의존성 배열에 그 state를 넣으면 안 되는 건가요?
검색해봐도 설명이 제각각이라 정리가 안 됩니다ㅠ 조언 부탁드려요.
작성자 스타트업러330
3 개의 답변
의존성 배열에서 빼면 당장은 안 돌겠지만 그거 해결이 아니라 덮는 거임ㅋㅋ 안에서 그 state를 바꾸니까 계속 재실행되는 거니까 조건을 걸든지 구조를 바꾸든지 해야 함
작성자 월급루팡511 · ▲0
저도 똑같이 3시간 날린 적 있는데요, useEffect 안에서 setState 하는 패턴 자체를 의심해보세요. 보통은 (1) 이벤트 핸들러에서 처리 가능한 걸 effect로 옮긴 경우, (2) 다른 state/props에서 계산 가능한 값을 굳이 state로 들고 있는 경우가 대부분이에요. 후자면 그냥 렌더링 중에 const로 계산하면 effect도 의존성도 필요 없어집니다. 진짜 외부 시스템 구독(웹소켓, 타이머, DOM 조작)일 때만 effect 쓰고, 그 안에서 setState는 최대한 안 하는 게 정신건강에 좋아요. 그래도 써야 하면 setState(prev => ...) 형태 + early return 조건 꼭 넣으세요.
작성자 초보개발자754 · ▲0
블로그마다 의존성 배열 넣지 마라 빼라 하는데 그거 따라하다가 나중에 더 크게 터짐. 린트 경고 무시하지 말고 왜 그 state가 의존성에 들어가야 하는지부터 보셈. 무한루프는 원인이 명확한 편이라 콘솔에 값 찍어보면 금방 나와요. 그냥 빼는 건 답이 아님.
작성자 AI덕후116 · ▲0