[React] useEffect

학습일 : 2023. 03. 16

---

보통은 state가 변경되면 코드가 계속 실행되지만

우리가 API를 호출한다거나, 어떤 중요한 일을 할 때에는

반복하지 않고 딱 한번만 호출하면 될 것이다.

 

딱 한번만 실행시켜주는 기능이 바로

useEffect 인데,

 

이 useEffect는 두개의 argument를 가진다.

 

 

첫번째 argument : 딱 한번만 실행하고 싶은 코드

두번째 argument : [ ]

 

 

 

---

<App.js>

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  const iRunOnlyOnce = () => {
    console.log("i run only once.");
  };

  console.log("I run all the time!"); // 컴포넌트가 render 될 때 출력됨

  // useEffect에게 우리의 function을 준다.(iRunOnlyOnce)
  // 그리고 두 번째 argument로써 빈 array를 하나 준다.
  useEffect(iRunOnlyOnce, []);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

useEffect 를 사용하였기 때문에

실행결과는 아래와 같다.

 

개발자도구 상으로

처음에 페이지가 로드 될 때는

 

i run only once.

I run all the time!

 

두개가 모두 출력 되지만

 

 

state가 변할 때

즉, 해당 코드상으로 볼 때는

버튼을 클릭했을 경우 count가 1이 올라가니까

그 때는

개발자도구 콘솔에

 

 

I run all the time!

만 계속 찍혀 나오게 된다.

 

 

 

 

 

다시 간결하게 정리해보자면

 

<App.js>

import { useEffect, useState } from "react";

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

  // useEffect 사용하기 - API 처럼 딱 한번만 호출하고 다시는 호출하지 않을 경우 사용
  useEffect(() => {
    console.log("CALL THE API...");
  }, []);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

 

API 처럼 딱 한번만 호출하고 다시는 호출하지 않을 경우 사용한다고 보면 될 것 같다.

이부분이 memo 기능과는 (유사하지만) 다른점이지 않을까?