#6.4 Cleanup

cleanup function

아래와 같이 created와 destroyed 컴포넌트의 생성과 종료를 확인할 수 있다

function Hello() {
  useEffect(() => {
    console.log('created :-)');
    return () => { console.log('destroyed :<'); }
  }, []);
  return <h1>Hello</h1>
}

 

일반적으로 byeFn() 같은 경우는 특정 경우에만 사용한다.

 

function Hello() {
  function byeFn() {
    console.log('bye :>');
  }
  function hiFn() {
    console.log('hi :-)');
    return byeFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>
}

// 위의 코드를 아래 코드로 간단하게 변경

function Hello() {
  useEffect(() => {
    console.log('hi');
    return function () {
      console.log('bye');
    }
  }, []);
  return <h1>Hello</h1>
}