[React] 컴포넌트가 렌더링 될 때 작업 실행하기: useEffect()

useEffect()

React로 만든 웹페이지는 한 개의 페이지에 여러개의 컴포넌트로 이루어져 있습니다. 그리고 만약 일부 컴포넌트에서 변동이 있다면 React는 페이지 전체를 처음부터 새로 만드는 대신에, 기존 웹페이지와 비교하여 차이가 있는 부분만 ReactDOM에 알려서 이 부분만 새로 렌더링을 시킵니다.

그리고 이렇게 렌더링이 될 때마다 비동기로 추가적인 작업(Side Effect)을 실행해야 할 때도 있습니다. 가령 API에 요청해서 값을 받아왔을 때 컴포넌트를 새로 렌더링해서 이 값을 업데이트 시키고 싶을 때가 있습니다. 이럴 때 바로 React Hook인 useEffect()*를 사용하면 됩니다.

 

* 기존의 클래스형 컴포넌트에서는 React의 생명 주기에 기반하여 componentDidMount, ComponentWillUnMount 등의 메소드를 사용하였지만 함수형 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었습니다. React의 Hook 기능들이 최신 기술이기 때문에, 클래스형 컴포넌트로 생명주기를 다루기보다는 함수형 컴포넌트로 Hook을 사용하여 코딩하는것을 권장드립니다.

---

useEffect() 문법

useEffect()의 기본적인 문법은 다음과 같습니다. Parameter로 function과 deps를 전달해야 합니다.

 

useEffect(function, deps)

 

• function은 렌더링이 될 때 실행할 함수입니다. 
• deps는 function을 실행할 조건입니다.
  deps를 전달하지 않으면 컴포넌트가 렌더링하면서 function이 실행됩니다.
  만약 특정 변수가 업데이트 될 때에만 function을 실행하고 싶다면 deps에 그 변수를 전달해야 합니다.
  굳이 변수가 아니더라도, 컴포넌트가 맨 처음 렌더링 될때만 function을 실행하고 싶다면 빈 배열 [ ]을 전달하기도 합니다.

 

useEffect() 사용하기

1. deps를 전달하지 않을때

useEffect()를 import하고 다음의 코드를 작성합니다. useEffect()에 deps가 전달되지 않았기 때문에 페이지가 처음 렌더링될때 메시지가 출력되고 이후에 버튼 1, 2가 클릭될때 버튼을 구별하지 않고 콘솔창에 메시지가 출력됩니다.

import React, { useEffect, useState } from "react";

function App() {
  const [buttonCount1, setCount1] = useState(0);
  const [buttonCount2, setCount2] = useState(0);

  useEffect(() => {
    console.log("Clicked!");
  });

  return (
    <div>
      <h1>Button 1 counted: {buttonCount1}</h1>
      <h1>Button 2 counted: {buttonCount2}</h1>
      <button
        onClick={() => {
          setCount1(buttonCount1 + 1);
        }}
      >
        Button 1
      </button>
      <button
        onClick={() => {
          setCount2(buttonCount2 + 1);
        }}
      >
        Button 2
      </button>
    </div>
  );
}

export default App;

 

2. deps에 빈 배열을 전달할때

useState()를 다음과 같이 수정합니다. 페이지가 처음 렌더링 될 때에만 콘솔에 메시지가 출력되며 버튼을 클릭해도 메세지가 출력되지 않습니다.

  useEffect(() => {
    console.log("Clicked!");
  }, []);

 

3. deps에 변수를 전달할때

useState()를 다음과 같이 수정합니다. 페이지가 처음 렌더링 될 때 메시지가 출력되고, 이후 버튼 1이 클릭되면 메시지가 출력됩니다.

  useEffect(() => {
    console.log("Clicked!");
  }, [buttonCount1]);