[React] Cleanup

Cleanup

useEffect 사용 시 컴포넌트가 생성될 때뿐만 아니라 사라질 때도 함수를 실행시킬 수 있다.

---

• useEffect 참고

[React] useEffect

 

아래 코드는 Show 버튼 클릭시 Hello컴포넌트가 생성되고 Hide 버튼 클릭 시 컴포넌트가 사라지는 코드이다.

import { useState, useEffect } from "react";

function Hello(){
  return (
  <h1>Hello</h1>
  );
}
function App() {
  const[showing,setShowing]=useState(false);
  const onClick=()=>setShowing((prev)=>!prev)
 
  return (
    <div>
      {showing?<Hello/>:null}
      <button onClick={onClick}>{showing?"Hide":"Show"}</button>  
    </div>
  );
}

export default App;

결과 화면

 

Hello 컴포넌트 안 useEffect를 추가해보자.

useEffect(()=>{
    console.log("I'm here!");
  },[])

 

show 버튼을 클릭하여 hello컴포넌트를 생성할 때마다 "I'm here!" 로그가 출력되는 것을 확인할 수 있다.

 

 

useEffect 부분을 수정해보자.

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

useEffect는 컴포넌트가 생성되고 사라질때도 코드를 실행할 수 있다.

=> 새로운 함수나 코드를 return하면 된다.

 

 

Hello 컴포넌트를 다시 정리하면 다음과 같다.

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

useEffect는 hiFn함수를 받고 그 함수는 dependency가 변화할 때 호출된다.

위에서 사용된 useEffect는 dependency가 빈 배열이기 때문에 처음 생성될 때 함수가 호출된 후 다시 호출되지 않는다.

컴포넌트가 파괴될때도 함수를 실행하고 싶으면 hiFn이 byeFn을 return 해주면 된다.

 

 

useEffect 사용하는 두가지 방법

 useEffect(()=>{
    console.log("hi :)")
    return ()=>console.log("bye :(")
  })

 

 useEffect(function(){
    console.log("hi :)")
    return function(){
      console.log("bye :(")
    }
  },[])

둘 다 같은 코드이지만 일반적으로 두 번째 방법은 길어서 잘 사용하지 않다고 한다.