useInterval()을 알아보자

2023.02.02 - [Frontend/React] - React에서 setInterval() 과 useInterval()무엇을 써야할까

React에서 setInterval() 과 useInterval()무엇을 써야할까

위의 글 처럼 예상되로 동작하지 않는 상황이었다.
useEffect에서 함수를 실행시켜주고, 실행이 끝날때마다 setInterval함수의 ID를 clear해줬다.

---

setInterval은 시간보장이 되지 않는다.
함수를 실행시키는 시간도 delay에 포함된다.
따라서 예측한 시간대로 타이머가 동작하지 않는다.

1초마다 index를 +1 해주기를 예측했는데,
만약 함수의 실행이 1초보다 길어진다면
다음 함수를 실행시켜버린다.

그래서 아마 console에서 index가 0,1,2,3.. 순서가 아니라
0,1,3,2,4,2,4,1... 이런식으로 찍혔던것 같다.

---

그래서 나는 useEffect안에 함수를 넣어주고
setInterval은 id를 계속 반환하니까
계속 clear해주면서 계속 interval을 생성했다.
정상적으로 돌아가는것 같았지만..
괜히 어? 왜 되는건데? 싶었다ㅎ;;

  useEffect(() => {
    const id = setInterval(autoSlide, delay);
    return () => clearInterval(id);
  }, [imgIndex]);

---

검색해보니
방법이 두가지가 있는데
1. setState에 callback을 넘겨준다
바뀌기전의 state값을 기억해서 setState해주는것이다.
setState((prev)=>prev+1);처럼 callback함수를 넘겨준다.
2. useInterval 사용하기
이 분이 만드셨다

you are the best developer thx :)

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Making setInterval Declarative with React Hooks

import { useState, useEffect, useRef } from "react";
function useInterval(callback, delay) { // 0. callback, delay를 받는다.
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback; // 2. 현재 저장된 savedCallback에 저장해준다.
  }, [callback]); // 1. callback을 의존성배열에 넣어 새로운 callback이 들어올때마다

  useEffect(() => {
    function tick() { // 4. tick()을 실행한다.
      savedCallback.current();  // 5. 현재 저장된 callback함수가 실행된다.
    }
    
    if (delay !== null) { // 6. delay 값이 있다면 
      let id = setInterval(tick, delay);  // 7.setInterval함수가 실행되어 id를 생성한다.
      return () => clearInterval(id);  // 8. clearInterval에 생성된 id를 넘겨 clear한다.
    }
  }, [delay]); // 3. 위의 useEffect는 delay가 변경될떄마다 실행된다.
}
export default useInterval;

savedCallback을 저장할때 useRef를 쓴 이유는
리렌더링때문이다.
setState를 해준다면 값이 바뀌어 리렌더링이 일어나고
ref.current에 새로운 값을 넣어주면 리렌더링은 일어나지 않는다 :)

---

여기서 공부했어욤 감사합니당 ~~ :)
thank you :)
https://mingule.tistory.com/65

React에서 setInterval 현명하게 사용하기(feat. useInterval)

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Making setInterval Declarative with React Hooks