[ReactJS] useEffect

이전에도 다룬적이 있지만,

useState()를 사용하면 modifier 함수를 불러올 때마다.

부모의 component 즉, 밑의 코드에서 App을 rerendering하게 된다.

그러나 API의 사용 등의 과정이 이 component사이에 껴 있으면,

다른 것을 update하는 과정에서 매번 API를 불러와야하는 불편한(?) 상황이 생길 수 있다.

이를 막기 위해 리액트는 useEffect를 제시한다.

 

다음 코드를 살펴보자

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 helps us to call a code only one time
  useEffect(() => {
    console.log("CALL THE API...");
  }, []);

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

export default App;

"react"에서 제공하는 useState와 useEffect를 사용할 것인데,

click me 라는 버튼을 클릭할 때 마다 onClick 함수가 실행될 것이다.

이 함수는 setValue라는 useState의 modifier함수인데, 받은 값을 하나 올려주는 역할을 수행함과 동시에,

App을 rerendering시킨다.
이 때에 API를 불러오는 등의 코드가 있으면 위에서 언급한 대로 사이트가 비효율적으로 돌아갈 것이니,

이와 같이 굳이 다시 돌리지 않아도 되는 코드는 useEffect() 속에 넣어두면 된다.

 

위의 코드를 돌려보면,

이와 같이 API를 돌리는 코드라고 가정한 콘솔 출력은 버튼을 클릭하여도 print되지 않는다.