리액트 setInterval(타이머함수) 사용시 문제점과 해결법

setInterval은 타이머관련 함수로 시간에 따라서 뭔가 하고싶을때 사용하는 함수다 그러나 리액트 특유 hooks에 리랜더 동작으로 원하는 대로 동작할려면 쪼금(?) 생각이 필요하다 잘못된 코드 예시) import React, { useState } from "react"; function App() { const [fontState, setFontState] = useState(5); setInterval(() => { setFontState(fontState + 1); }, 1000); return ( <div> <div style={{ fontSize: fontState + "px" }}>안녕</div> </div> ); } export default App; 안녕이라는 글이 1초마다 점점 커지는 코드를 생각했을때 직관적으로 나올수 있는 코드지만 useState에 hooks 특성때문에 계속 렌더링 되서 원하는 동작을 얻기 힘들다 (안녕이라는 글이 막 지진나듯이 덜덜떨리면서 ...

원문링크 : 리액트 setInterval(타이머함수) 사용시 문제점과 해결법