setInterval() 문제

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>;
}