react setInterval에서 state 업데이트 안됨

에러 내용

---

useEffect에서 setInterval 호출

주기적으로 업데이트해야 하는 화면이 있을 때, setInterval을 활용하게 됩니다.

그러나 이러한 setInterval에서는 state 업데이트가 되지 않습니다.

이로 인해 state로 인한 주기 종료(clearInterval)을 할 수 없습니다.

에러 원인

---

이는 클로저로 인함입니다.

state가 업데이트 되더라고 setInterval을 호출한 시점에서의 변수 환경이 클로저의 형태로 함수에 종속되기 때문에 setInterval에서는  state의 변화를 감지할 수 없습니다.

 

해결 방법

---

state를 직접 사용하지 않고 화면의 특정 요소의 값이나 그 요소 자체의 유무를 사용하도록 하면 됩니다.

 

 

수정 전 코드

useEffect(() => {
    let intervalId;
    intervalId = setInterval(() => {
      if (state) {
        // 계속 업데이트 해야 할 코드
      } else {
        console.log("close");
        clearInterval(intervalId);
      }
    }, 500);
  }, [open]);

 

수정 후 코드

useEffect(() => {
    let intervalId;
    let isClose;
    intervalId = setInterval(() => {
      isClose = document.querySelector(".isClose");
      if (isClose) {
        // 계속 업데이트 해야 할 코드
      } else {
        console.log("close");
        clearInterval(intervalId);
      }
    }, 500);
  }, [open]);

 

화면에 추가할 요소

const IsClose = ({ state }) => {
  if (state) {
    return <div className="isClose" hidden></div>;
  } else {
    return <></>;
  }
};

 

참고 자료

---

 

클로저 - JavaScript | MDN