https://ko.reactjs.org/docs/hooks-effect.html
clean-up: 컴포넌트가 나타났을 때(렌더링 시에) useEffect가 실행되었다면, 컴포넌트가 사라질 때 실행되는 것.
이때까지 사이드 프로젝트에서 useEffect를 사용하면서 마운트 해체 시를 고려하지 않았었는데, 검색하다보니 간단한 예시가 있어 한번 따라해보았다.
import { useEffect, useState } from "react";
export const Timer = (props) => {
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => {
//clean-up
clearInterval(timer);
};
}, []);
return <div>타이머</div>;
};
const App = () => {
const [showTimer, setShowTimer] = useState(false);
return (
<div className="App">
{showTimer && <Timer />}
<button
onClick={() => {
setShowTimer(!showTimer);
}}
>
click
</button>
</div>
);
};
export default App;
간단한 예제.
state 하나를 boolean으로 받고 timer를 만들어, 버튼을 클릭 시 false-> true가 됨이 동시에 타이머가 돌아간다. 다시 클릭 시 true -> false가 되는 기능인데, clean-up을 하지 않을 때는 timer가 눈으로는 보이지 않지만 실제로는 돌아가는 중이다
(처음 Timer가 마운트 된 시점에서 setInterval이 컴포넌트 상으론 보이지 않지만 Effect내부에서 돌고 있다).
=> clearInterval(timer); 을 해 정리를 해주는 너낌