React(5) 〓 useEffect, clean up function

useEffect & clean up function

const [data, setData] = useState({});
const [count, setCount] = useState(0);

useEffect(
    function () {
      fetch(`https://swapi.dev/api/people/${count}`)
        .then((res) => res.json())
        .then((data) => setData(data));
    },
    [count]
  );

return (
    <div className="App">
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <h2>The count is {count}</h2>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        Add
      </button>
    </div>
  );

코드를 보시면 일단 useState를 이용하여 화면에서 코드를 변경할 count를 즉각적으로 보여 줄 수 있게 했습니다. 이게 있으면 이번에 배울 useEffect라는 걸 사용하기에 편리합니다.

버튼을 누르면 count 값을 1 증가시키게 했는데 useEffect가 count 값이 변동된 것을 바로 적용해 주면서 바뀐 링크의 결괏값을 저 JSON.stringify~라는 곳에 바뀐 결과를 출력해 줍니다.

[] 여기에다가 count를 넣는 이유는 count의 값이 변경될 때마다 그 변경된 걸 적용해 주려는 이유입니다.

return function () {
      console.log("Cleaning up...");
      window.removeEventListener("resize", watchWidth);
};

clean up function은 return function() {}; 이런 걸 사용하는 겁니다.
버튼 같은 걸 눌러서 비활성화되면 저걸 이용해 초기화하는 특정 작업을 수행하시면 됩니다.