우리가 api정보는 한번만 불러오면 계속사용할 수 있는 특징을 지니고 있는데 랜더링은 state가 계속 변할때마다 api를 계속 불러오게 된다. 랜더링이 처음 되고 그때서만 데이터를 불러오는 방법은 useEffect를 사용하는 것이다.

첫번째 인수는 한번만 실행하고픈 함수를 callback하는 것이다.

검색 키워드 state를 생성했다고 하자. 그런데 버튼을 클릭할때마다 랜더링이되어 검색을 안해도 검색 키워드가 전달되는 현상이 발생한다. 이번엔 특정 state가 변할때 원하는 코드만 실행하는 방법을 사용한다. 여기서 useEffect의 두번째 인수 deps를 사용한다. deps에 등록한 변수의 데이터가 변할때 useEffect가 동작하게 된다.

그래서 deps param에 []를 쓰는 이유가 아무런 변수를 제공하지 않았기에 변화된 데이터가 없어 업데이트가 안되는 것이다.

Cleanup function는 useEffect의 함수 component가 distroy될때 실행되는 함수이다.

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

즉, component를 distroy하고 싶을때 새로운 함수를 리턴해야 한다.

function Hello() {
  function destroyedFunc() {
    console.log("hye :(");
  }
  function effectFunc() {
    console.log("created :)");
    return destroyedFunc;
  }
  useEffect(effectFunc, []);
  return <h1>Hello</h1>;
}

풀어쓰면 위와 같다