React 에서 setInterval, timer 사용하는 법 리액트 JS TS

위와 같은 기능을 구현하기 위해서 setInterval()을 사용할 필요가 있었다.

 

리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 된다.

function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) {
  const [order, setOrder] = useState(1);
  const [isPlay, setIsPlay] = useState(true);

  const handleAfterClick = () => {
    setOrder((prev) => (prev + 1 === 4 ? 0 : prev + 1));
  };
  const handleBeforeClick = () => {
    setOrder((prev) => (prev - 1 === -1 ? 3 : prev - 1));
  };
  const handlePlay = () => {
    setIsPlay((prev) => {
      return !prev;
    });
  };
useEffect(() => {
    let timer: NodeJS.Timer | undefined;
    if (isPlay) {
      timer = setInterval(handleAfterClick, 5000);
    }
    return () => {
      if (timer) clearInterval(timer); //Cleanup Function
    };
  }, [order, isPlay]);

1. 위 코드의 경우 movie데이터의 순서를 담아둔 order State, play 여부를 담아둔 isPlay state를 Depedency로 넣었다.

2. cleanup Fn에 타이머를 리셋하지 않으면 마운트 될 때 setInterval이 중첩되어 의도하지 않은 상황이 발생한다.

3. 위 코드는 재생중일 경우 타이머가 작동하도록 하였고, 다른 기능을 이용해서 order가 변경되었을 때 useEffect가 새로 시작하지 않으면, handleAfterCLick함수가 짧은 시간에 두번 작동될 수 있기 때문에 order 역시 dependency로 넣었다.