useEffect

• state가 변화할때 모든 component는 다시 실행되고, 모든 code들도 다시 실행된다.
• component 내부중에서 일부는 처음 한 번만 실행되게끔 만들고 싶을 때 사용.
• 언제 코드를 실행할지 선택할 수 있다.

useEffect 사용

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("Call the API");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

• 버튼을 클릭하면 i run all the time 부분은 계속 실행되고, Call the API 부분은 처음 한 번만 실행되고 버튼 클릭시에는 실행이 되지 않는다.

import { useEffect, useState } from "react";
import Button from "./Button.js";
import styles from "./App.module.css";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log("i run all the time");
  useEffect(() => {
    console.log("Call the API");
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log(" Search for", keyword);
    }
  }, [keyword]);
  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;

• useEffect의 뒷 [] 부분에는 특정한 keyword가 변화할 때만 코드를 실행하게끔 작성한다.
• keyword를 넣으니 input 내부가 변화할때마다 Search for 뒷부분의 콘솔이 찍히게 됨.