state를 사용하면 한 번 state가 바뀔 때마다 해당 컴포넌트 전체가 다 리렌더링 되면서 코드가 실행되었다.

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((preb) => preb + 1)
console.log("rendered")
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}
결과 -> button 클릭했을때마다
rendered
rendered
rendered
...

만약 컴포넌트가 맨 처음 render 될 때만 코드가 실행되고 싶은 경우라면?

useEffect

useEffect

• 두 개의 argument를 가지는 함수
• 첫 번째 argument는 function : 우리가 딱 한번만 실행하고 싶은 코드
• 두 번째는 dependencies : react.js가 지켜볼 [] 배열을 넣어줌 → 이 안의 state가 변화될 때만 해당 함수가 변화한다. 비어 있으면 처음 한 번만 실행된다.

특정 코드들이 첫 번째 component render에서만 실행되게 하는 방법

API를 불러오거나 다른 중요한 일을 할 때에는 굳이 또 불러올 필요가 없으므로!

useEffect 함수를 이용한다.

src/App.js

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

내 코드의 특정한 부분만이 변화했을 때, 원하는 코드만 실행될 수 있는 방법

여러 state가 한 컴포넌트 안에 있을 때, 한 state가 변화한다고 해서 다른 state까지 변화할 필요는 없다.

• 수정 전 코드
• 수정 후 코드

cleanup function