💡Effecs란?

계속 다시 render될 때마다 반복실행되어도 괜찮은 코드가 있을 수 있다.
하지만, 컴포넌트가 처음에 render될 때만 코드가 실행되길 원할 수 있다.

• 🚩 API를 통해 데이터를 가져올 때: 첫 번째 component render에서 API를 call, 이이후 state 변화할 때는 다시 데이터를 가져올 필요가 없다

예를 들어

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("render");
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

위 코드에서 console.log("render")은 state가 변할 때마다 매번 실행된다.
첫 번째 render에만 코드가 실행될 수 있도록 하려면?

📌 useEffect 사용하기

👉useEffect()

• effect: 첫 번째 argument, 실행시키고 싶은 코드
• deps: 두 번째 argument, dependencies로 react.js가 지켜볼 것

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("I run all the time");

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

❓코드의 특정한 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법은?
이때 useEffect를 사용한다!!!

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

위처럼 ✨keyword가 변화할 때마다✨ console.log("SEARCH FOR", keyword);가 항상 실행된다.

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

위의 경우는 ✨처음 한 번만✨ 실행된다.

👉이를 통해 언제 코드가 실행될지 결정할 수 있게 되었다!

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);
  console.log("I run all the time");

  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]);
  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder="Search here..."/>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

📌 CleanUp function

component가 destroy될 때도 코드를 실행할 수 있다.

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

react 앱을 만들 때 cleanup function을 자주 사용하게 되지는 않을 수 있다.

// 아래 두 줄은 동일한 코드
useEffect(() => {}, []);
useEffect(function() => {}, []);