[알게된 것] React, useEffect에서 setInterval 사용하기

🧡사건 발생

슬라이드 기능을 만들어야하는데, React에서 setInterval을 사용하면 반복적인 리랜더링이 발생하지 않나..? 라는 생각이 들어 알아보기 시작했다.

무엇보다 중요한 점은 useEffect내부에서 선언된 setInterval을 멈추는 방법을 모른다.

💛해결 방안

useEffect(() => {
  	// setInterval 동작
	const test = setInterval(() => {...}, 1000)
    // 조건 상태가 충족될 경우 중단
    if(조건 상태) {
      clearInterval(test)
    }
    // unMount시 반복 중단
    return () => clearInterval(test)
}, [조건 상태])

위와 코드를 작성하여, 특정 상태가 충족될 경우 반복을 중지하는 setInterval을 만들었다.

💚마치며

검색을 통해 알게된 점으로, setInterval(callback, delay) 해당 딜레이를 조절하기 위해선 useRef를 사용하는 함수를 새로 생성해 컨트롤해주면 편한데, 이는 꼼꼼히 작성해주신 다른 분의 벨로그를 태그한다 ㅎㅎ

감사합니당.