[TIL] React Cleanup

component가 없어질 때

어떤 분석 결과를 보내고 그러한 API를 보고 싶은 경우
혹은 이벤트리스너를 지우거나 콘솔에 뭔가 보여줄 때

// 이해하기 편하도록 쪼갰습니다.
function App() {
 function byFn() {
   console.log('bye 😥');
 }
 function hiFn() {
   console.log('hello 😀');
   return byFn;
 }
  useEffect(hiFn,[]);
  return <h1>Hello</h1>;
}

// 보통은 아래와 같이 한번에 작성한다고 합니다.
function App() {
 useEffect(()=>{
   console.log('hello 😀');
   return console.log('bye 😥');
 },[]) 
}

App 컴포넌트가 생성될 때에는 hiFn함수가 실행될 텐데, 반대로 언제 파괴될 지도 알고싶으면
hiFn함수가 byFn함수를 return을 해야할 것이다.

useEffect는 hiFn함수를 받고, hiFn함수는 dependency가 변화할 때 호출된다
하지만 이런 경우에는 dependency가 비어있기 때문에 App컴포넌트가 처음 생성될 때 hiFn함수가 호출된 후에 다시 호출되지 않는다.
이제 App컴포넌트가 파괴될 때에도 byFn함수를 실행하고 싶으면 hiFn함수가 byFn함수를 return을 해야 한다.

이처럼 useEffect함수는 우리에게 언제 코드를 실행할 지 선택권을 준다.

• 컴포넌트가 시작할 때만 코드를 실행하거나
• 무언가 변화할 때만 코드를 실행하거나
• 컴포넌트가 파괴될 때만 코드를 실행하거나

cleanup 처리를 많이 사용하지는 않겠지만 가끔은 할 필요가 있을 수도 있다.

React 공식문서 참고