(Error)React에서 setInterval사용 중 마주친 에러

리액트에서 setinterval을 처음 사용해보면서 많은 에러를 마주했음...

1. 값이 그지같이 나오는 현상
   처음 내 생각은 setInterval로 useState의 값을 바꾸면 시간이 바뀔 때 마다 주기적으로 값이 바뀌어야 정상이었음

const [test, setTest] = useState(0)
const testFunc = setInterval(()=>{
setTtest(test + 1)
}, 1000)

useEffect((testFunc())=>{},[])

대충 요러쿠롱 해준다면

제일 먼저 날 반겨주는 녀석은

TypeError: Assignment to constant variable.

이 녀석이었음

잉? 이게 뭔소린가 싶었음

아니 내가 알 던 그 비동기만 아니면 완벽한 useState은 setState으로 바꾸면 바뀌는 어디간거여

당장 let으로 바꾸면 사용이 가능하긴하나 ... 그럼 useState을 왜 쓰나 싶어서 열심히 구글을 찾아보니깐 setInterval이랑 react가 사이가 안좋았음

이거 말고도 state값이 미친듯이 바뀌기도 했음

이게 초마다 +1일 되는 것이 아닌5,2,231,5,34,3,2,3,1,23,,56,3, 요런 형식으로 바뀌기 시작했음

그래도 역시 세상에 귀인은 많다고

해결을 찾을 수 있었음
역시 프로그래머들은 박애주의자들이야

1. 방법

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

이런 아름다운 코드를 귀한 나를 위해 공개한 누추한분이 계셨음

저 아름다운 함수를 사용해서

문제를 해결할 수 있었음!

이거 gif 어케 올리지
사이즈가 안되넹