[ReactJS] useEffect, Cleanup

state가 바뀌면 자동으로 변경된 새로운 값을 가지고 모든 컨포넌트가 처음부터 다시 실행된다. 그런데 이게 괜찮을 때도 있지만 대부분의 경우 API로 데이터를 불러오는 코드가 있게 되면 state가 바뀔 때마다 계속 API로 데이터를 불러오게 되어 매우 비효율적이게 된다. 이를 막기 위해선 useEffect를 사용해야한다. useEffect에는 두가지 argument가 필요한데, 첫번째는 실행할 구문이 들어가면 되고, 두번째로는 무엇이 변화할 때 첫번쩨 인자인 구문을 실행할지를 정하는 dependency가 들어가면 된다. 즉 다음의 예시에서 두번째 useEffect는 해당 구문이 맨 처음 render할 때 실행되고,또 keyword가 변화할 때 실행된다고 생각하면 된다. 첫번째 예시의 경우 dependency가 없기 때문에 맨 처음에만 실행된다고 생각하면 된다. 마지막의 경우에는 맨 처음에 한번, 그리고 keyword 또는 counter가 변화할 때 실행된다.

 

추가적으로 Cleanup 함수에 대한 부분도 아래에 코드와 함께 설명되어있다.

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  // dependency
  useEffect(() => {
    console.log("I run only once.");
  }, []);
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]);
  useEffect(() => {
    console.log("I run when keyword & counter changes.");
  }, [keyword, counter]);

  /* 아래 Hello 함수안에 있는 두가지 useEffect는 Cleanup함수에 대한 것으로
  익명의 함수를 사용하여 만든 완전히 같은 것이다. 
  그런데 보통 아래 것이 더 간편해서 아래를 주로 쓴다. */
  function Hello() {
    useEffect(function () {
      console.log("hi :)");
      return function () {
        console.log("bye :(");
      };
    }, []);
    useEffect(() => {
      console.log("hi :)");
      return () => console.log("bye :(");
    }, []);
    return <h1>Hello</h1>;
  }
    /* 위의 함수를 좀 더 이해하기 쉽게 풀어쓴 Cleanup 함수이다.
    즉 Cleanup 함수는 useEffect에서 추가할 수 있는 기능으로 지정한 변화가 있을 때,
    혹은 맨 처음에 render된 이후 해당 컨포넌트가 아예 사라질 때! 원하는 함수를 실행하는 것이다.
    아래의 경우 맨 처음 생겼을 때 hiFn을 실행하고 byFn을 return하는데, return된 byFn은
    해당 컨포넌트가 사라질 때, 즉 아예 없어질 때 실행이 된다. 자주 쓰는 기능은 아니지만
    필요할 때가 있을 수 있다고 한다.
    */
  function Hello2() {
    function byFn() {
      console.log("bye :(");
    }
    function hiFn() {
      console.log("hi :)");
      return byFn;
    }
    useEffect(hiFn, []);
    return <h1>Hello</h1>;
  }
}

export default App;