[노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 1. useEffect

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  useEffect

---

어떠한 변화가 있을 때마다 모든 코드를 rerender하는 것은 매우 비효율적이다.
때문에 특정 코드의 실행을 제한하는 법을 알아보자!

import { useState, useEffect } from "react";

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");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

👉🏻useEffect의 첫 번째 인자에 실행을 제한할 코드를 넣어준다.

useEffect의 코드만 한 번 실행되는 것을 불 수 있다.