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

티빙 홈페이지

티빙 홈페이지 배너는 가만히 있으면 이미지가 다음으로 넘어가는 슬라이드 형식의 배너입니다.

위와 같은 기능을 리액트에서 구현하기 위해 setInterval 사용하는 법을 알아보겠습니다

리액트에서 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로 넣었습니다..

아래는 티빙 홈페이지와 같이 구현해 보았습니다.

완성된 기능