useState와 setInterval 함께 사용할 때

✔️ 필요성

setInterval을 통해서 주기적으로 state값을 변경시키고 싶다

 

✔️ 문제 해결

useEffect의 [] argument안에 state값을 추가해야 한다!

const [monthIdx, setMonthIdx] = useState<number>(2);

    /* 0부터 2까지 숫자를 계속 돌아가게 만듦 */
    const monthCarousel = (monthIdx: number) => {
        var len = 3;
        if (monthIdx === len - 1) return 0;
        else return monthIdx + 1;
    } 

	/* 3초에 한번씩 내용 바뀜 */
    useEffect(() => {
        const interval = setInterval(()=>{
            setMonthIdx(monthCarousel(monthIdx));
        }, 3000);
        return () => clearInterval(interval);
    }, [monthIdx])