setInterval() 문제 - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

1. 10초마다 자동으로 저장되는 기능을 구현하고 싶은데, setInterval()이 제대로 동작하지 않는다...왜?

  • console.log()를 찍어봤지만, 일정 시간 간격으로 찍히지 않는다.
  • 리액트 훅스에서는 setInterval()이 내가 생각한대로 동작하지 않는다는 사실을 알게됨
  • 리액트 훅스에서 마운트, 언마운트 타이밍
useEffect(() => {
	console.log('컴포넌트가 화면에 나타남')
	return () => {
		console.log('컴포넌트가 화면에서 사라짐')
	}
})
  • setInterval()과 clearInterval()의 타이밍 문제
// 예시
useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  });

// 다음과 같이 재렌더링이 많이 일어난다면, interval은 동작할 기회를 얻지 못한다. 
// 타이머를 너무 빨리 clear 하게 된다. 
setInterval(() => {
  ReactDOM.render(<Counter />, rootElement);
}, 100);

[해결 방법]

  • ref는 어떤 것이든 넣을 수 있는 '박스' 같은 것이다.
  • 최신 callback을 저장해 둔다.
function Counter() {
  const [count, setCount] = useState(0);
  const savedCallback = useRef();

  function callback() {
    setCount(count + 1);
  }

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}
⚠️ **GitHub.com Fallback** ⚠️