react clean-up

https://ko.reactjs.org/docs/hooks-effect.html

clean-up을 이용하는 Effects

clean-up: 컴포넌트가 나타났을 때(렌더링 시에) useEffect가 실행되었다면, 컴포넌트가 사라질 때 실행되는 것.

• 외부데이터에 subscription을 설정해야 하는 경우,
  메모리의 누수가 발생하지 않도록 정리한다.

이때까지 사이드 프로젝트에서 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); 을 해 정리를 해주는 너낌