React useEffect 경고메시지

Question

react의 useEffect에서 의존성배열에 없는 값을 부수효과 함수에 사용하면 React Hook useEffect has a missing dependency: ' '. Either include it or remove the dependency array react-hooks/exhaustive-deps다음과 같은 경고를 받는 것을 알 수 있었습니다. 여기서 부수효과 함수에 있는 데이터는 의존성배열에 두도록 권장하는 이유가 의존성 배열에는 없지만 부수효과함수에는 있는 값(A)이 업데이트되지 않은 상태로 실행되어 의도치 않은 값을 얻을 수 있다고 알고있는데 그런 예시를 하나만 들어주실 수 있을까요?

songline · Answer

충분한 예가 될란지는 모르겠지만 의존성 배열에서 변수를 빼보면 알 수 있죠. 아래는 저번에 부수함수 질문에 대한 답변으로 제공해드렸던 예제 코드입니다.(자잘한 주석은 치웠습니다.)const Counter = () => { const [baseCount, setBaseCount] = React.useState(1); const [count, setCount] = React.useState(1); const ref = React.useRef(count); React.useEffect(() => { ref.current = count; }, [count]); ////////////////////////////////////////////// React.useEffect(() => { setCount(baseCount); const intervalId = setInterval(() => {setCount(ref.current + baseCount)}, 1000); return () => { clearInterval(intervalId); } }, [baseCount]); ////////////////////////////////////////////// return (<>

{count}

) } // ======================================== const root = ReactDOM.createRoot(document.getElementById("root")); root.render();여기서 useEffect 부분만 따로 떼면 아래와 같은데, 의존성 배열에 baseCount 가 전달되고 있습니다. React.useEffect(() => { setCount(baseCount); const intervalId = setInterval(() => {setCount(ref.current + baseCount)}, 1000); return () => { clearInterval(intervalId); } }, [baseCount]); 여기서 의존성 배열에 있는 baseCount를 제거해봤습니다. 그럼 말씀하신 "부수함수 내에서는 사용하지만 의존성 배열에서는 빠져있는 변수"가 되겠죠? React.useEffect(() => { setCount(baseCount); const intervalId = setInterval(() => {setCount(ref.current + baseCount)}, 1000); return () => { clearInterval(intervalId); } }, []); 이렇게 만들고 실행해보면 up, down 버튼을 아무리 클릭해도 숫자는 바뀌지 않고 1초마다 1씩 오르기를 반복합니다. 그 이유는 baseCount가 의존성 배열에 포함되어 있지 않아 값이 바뀌었음에도 useEffect 내 부수효과 함수가 다시 실행되지 않았기 때문이죠. (baseCount가 포함되어 있을 때는 값을 초기화하고 interval을 새로 설정합니다.)이런 유형의 상황이 발생할 수 있기 때문에 부수효과 함수 내에서 사용하는 변수가 있다면 의존성 배열에 추가하라고 경고 메시지를 띄우는 것입니다.

React useEffect 경고메시지

1개의 답변

Q&A 목록