[React] Effect

useEffect

when should the code run?

import { useState, useEffect } from "react";
import Button from "./Button";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("I run all the time");
  const iRunOnlyOnce = () => {
    console.log("I run only once");
  };
  useEffect(iRunOnlyOnce, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me!</button>
    </div>
  );
}

export default App;

useEffect를 사용하면 function이 한번만 실행된다.
useEffect(function, [defendencies])

검색 기능을 만들고 싶은데, keyword가 입력될 때마다 계속 API를 불러오면... 좀 그럴 것이다. 예를 들어, "HELLO"를 검색하는데 H.. HE.. HEL... 마다 계속 API를 불러오면 비효율적이다.
게다가 counter가 바뀔 때도 keyword가 검색된다!

keyword가 바뀔 때만 API를 불러오도록 하기

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

keyword가 바뀔 때마다 API가 실행되게 함

check 조건 하나 더 넣어주기(문자열의 길이)

  useEffect(() => {
    if (keyword !== "" && keyword.length > 5)
      console.log("search for", keyword);
  }, [keyword]);

  const iRunOnlyOnce = () => {
    console.log("I run only once");
  };

  useEffect(iRunOnlyOnce, []);
  useEffect(() => {
    console.log("I run when keyword changes");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when counter changes");
  }, [counter]);

이런식으로 쓰면 각각 뭐가 달라지느냐를 인식해서 달라질 때 console.log(~)가 실행된다.

clean up function

function Hello() {
  useEffect(() => {
    console.log("created :)");
    return () => console.log("distroyed :(");
  }, []);
  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>
  );
}

간단한 버튼을 만들어 봤다.

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

return () => {} : 컴포넌트가 파괴될 때 실행된다.