CleanUp

CleanUp 함수 : 컴포넌트가 destroy될 때 뭔가 할 수 있도록 하는 함수

useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다.

이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다.

function Hello() {
  useEffect(() => {
    console.log("Created");
    return () => console.log("Destroyed");
  }, []);
  
  return <h1>Hello</h1>;
}

위 코드는 아래의 코드와 같은 이야기를 한다.

function Hello(){
   function byeFn() {
     console.log("Bye");
   }
   function hiFn() {
     console.log("Created");
     return byeFn;
   }
useEffect(hiFn, []);
  
return <h1>Hello</h1>;
}

1. Hello 컴포넌트가 생성될 때
2. hiFn 이 실행되고("Created"출력)
3. hiFn이 byeFn을 return해줌으로서 컴포넌트가 파괴될 때를 알 수 있다.

---

매번 사용하지는 않을 것이지만 알아두면 필요할 때 유용한 cleanUp