외부 시스템을 상태와 동기화하고 구독을 정리합니다.
useEffect는 렌더가 반영된 뒤 브라우저 API, 네트워크, 타이머 같은 외부 시스템과 동기화합니다. 반환 함수는 다음 실행 전과 제거 시 자원을 정리합니다.
Effect가 읽는 반응형 값은 dependency에 포함하고 단순 계산은 렌더 중 처리합니다.
설정과 정리를 대칭으로 만들어 StrictMode의 setup-cleanup-setup에서도 문제가 없게 합니다.
타이머를 만들고 clearInterval하지 않으면 다시 마운트할 때 중복됩니다.
로컬 프로젝트에서 확인해보세요document.title도 seconds 값과 함께 갱신하세요.
import { useEffect, useState } from "react";
export default function App() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds((v) => v + 1), 500);
return () => clearInterval(id);
}, []);
return (
<main>
<h1>학습 시간</h1>
<p>{seconds}초</p>
</main>
);
}