setInterval carousel

위코드 1차 프로젝트 중 carousel 중 한 부분이 시간마다 다른 사진으로 이동이 되어 사용하는 법을 찾던 중 동기분들의 도움으로 useEffect에 setInterval method를 사용하여 carousel이 자동으로 이동되는 방법에 대해 도움을 받았다.

setInterval?

• setInterval() method는 지정된 간격(밀리초)으로 함수를 호출합니다.
• setInterval() method는 clearInterval()이 호출되거나 창이 닫힐 때까지 함수를 계속 호출합니다.

clearInterval?

• clearInterval() method는 setInterval() method로 설정된 타이머를 지웁니다.
• 따라서, setInterval method를 사용하고 나서 clearInterval을 선언하지 않으면 멈추지 않기 때문에 계속 setInterval만 추가로 증가됩니다.

코드 적용

const [currentSlide, setCurrentSlide] = useState(0); // slide 초기값 0 설정
...

  useEffect(() => {
    const timer = setInterval(
      () => setCurrentSlide(prevIndex => (prevIndex !== 1 ? prevIndex + 1 : 0)), // prevIndex가 1이 아니면 + 1이 되고 아니라면 0이되는 setInterval 설정
      5000 // 밀리초 단위로 설정되기 때문에 5000은 5초
    );
    return () => {
      clearInterval(timer); // timer 함수를 clearInterval을하여 return 한다.
    };
  }, []);
...

결과 화면

참고 및 출처
https://www.w3schools.com/jsref/met_win_setinterval.asp
https://www.w3schools.com/jsref/met_win_clearinterval.asp