React (8) - Effects #2 [cleanup]

만들어볼까? show 클릭 hello / hide null

 

function Hello() {
  useEffect(()=> {
    console.log("I am here!");
  },[]);
  return <h1>Hello!</h1>;
}

function App() {

  const [value, setValue] = useState(false);
  const onClick = () => setValue((prev) => !prev);
  return (
    
     <div>
      { value ? <Hello /> : null }
      <button onClick={onClick}> { value ? "hide" : "show" } </button>
     </div>
   
  );
}

show 버튼을 누르면 컴포넌트를 생성 코드 실행	hide 버튼을 누르면 컴포넌트 삭제 -> 삭제될 때도 코드 실행할 수 있음

useEffect(()=> {
    console.log("created :)");
    return () => console.log("destroyed :(");
  },[]);

show 버튼누르면 컴포넌트 생성되면서 created:) hide 버튼 누르면 컴포넌트 삭제되면서 destroyd:(

"cleanup은 함수의 종류로 컴포넌트가 삭제 될때 뭔가 할 수 있게 해주는 역할"

//위 코드와 동일 // 

function Hello() {
  function byFn() {
    console.log("destoryed :(");

  }
  function hiFn () {
    console.log("created :)");
    return byFn;
  }
  useEffect(hiFn,[]);
  return <h1>Hello!</h1>;
}

  useEffect는 언제 code를 실행할지 선택할 수 있다.