useEffect

useEffect

useEffect : 컴포넌트 rendering 할 때 특정 state가 변할때만 해당 함수 호출

useEffect(() => {
   console.log("CALL THE API")
 }, []);

// [] 가 비워져 있으면 처음 render 될때만 실행.

 useEffect(() => {
   console.log("search for", keyword)
 }, [keyword]);

// keyword 라는 state 가 변할 때 해당 함수 실행.

즉, 한 컴포넌트 안에 여러 이벤트가 있을 때, 특정 이벤트가 특정 state가 변할때만 render 하고 싶을 때 사용한다.
[] 안에는 2개 이상의 상태가 들어갈 수도 있다.

cleanup function

useEffect 에서 destroyed 될 때(컴포넌트가 unmount 될 때) 해당 함수 실행.

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

여기서 return 해준 함수가 cleanup 함수이다.(뒷정리 함수.)

function Hello() {
  function byfn() { console.log("bye~") };
  function hifn() { console.log("hi~"); return byfn; };
  useEffect(hifn, []);
  return <h1>HELLO</h1>
}

이렇게 함수를 따로 정리해줄수도 있다.