🔷
React useEffect Cleanup
useEffect에서 클린업 함수 사용하기
DevNest
TypeScript
ReactHooksuseEffectCleanup
typescriptReact useEffect Cleanup
1import { useEffect, useState } from 'react';
2
3function Timer() {
4 const [seconds, setSeconds] = useState(0);
5
6 useEffect(() => {
7 const interval = setInterval(() => {
8 setSeconds(s => s + 1);
9 }, 1000);
10
11 // 클린업 함수: 컴포넌트 언마운트 시 실행
12 return () => {
13 clearInterval(interval);
14 };
15 }, []); // 빈 배열: 마운트 시 1회만 실행
16
17 return <div>Seconds: {seconds}</div>;
18}