[React] Hook, useEffect 의존성 배열

useEffect

웹 사이트를 이용하기 위해 웹 브라우저에서 서버로 요청을 보내고 서버는 클라이언트에게 응답을 받는다. 이 과정에서 다른 외부 시스템과 연결되어 처리해야 할 다른 작업들이 있을 수가 있다. 예를 들어 외부 API가 사용되는 경우가 있는데 이럴 경우 컴포넌트는 클라이언트에게 응답을 끝내고 나서 이런 작업들을 처리하는 것이 바람직하는데 이럴 때 useEffect를 통해 쉽게 처리할 수가 있다.

렌더링 이란

서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저는 서버로부터 HTML 문서를 다운 받는다

 

useEffect 문법

useEffect(setUp함수,[의존성 배열])

setUp함수 : 렌더링이 된후 사용되는 함수

의존성 배열 : useEffect가 작동되기 위한 의존하는 값들을 포함하는 배열

 

useEffect를 사용하는 형태는 3가지로 있을 수 있다. 

1. 의존성 배열이 없는 경우

2. 빈 의존성 배열이 있는 경우

3. 의존성 배열 안에 값이 있는 경우

 

의존성 배열이 없는 경우

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

const App = () => {
  useEffect(() => {
    console.log(calculator);
  });

  const [calculator, setCalculator] = useState(0);

  const onClickPlus = () => {
    setCalculator(calculator + 1);
  };

  const onClickMinus = () => {
    setCalculator(calculator - 1);
  };

  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <button onClick={onClickMinus}>-</button>
      <div className="mx-10">{calculator}</div>
      <button onClick={onClickPlus}>+</button>
    </div>
  );
};

export default App;

 

위의 코드는 웹페이지 상에서 +를 누르면 값이 증가하고 -를 누르면 값이 감소하는 함수 이다. 그리고 렌더링 될때 콘솔에 calculator를 출력한다.

useEffect를 사용하기 위해선 useState처럼 import를 해 주어야 한다.

import { useEffect } from "react";

이 코드를 실행 시키면 아래와 같은 화면이 출력된다.

리액트를 실행 시키고 웹 페이지를 열면 이러한 첫 과정이 첫 렌더링 되는 것이다.  그러므로 useEffect가 실행되고 useEffect안에 있는 console.log(caculator) 함수가 실행되어 콘솔창에 caculator의 초기값인 0이 출력이 된다.

컴포넌트 내에 변화가 생기면(이 상황에서는 calculator의 값변화) 리렌더링이 되기 때문에 useEffect가 실행되어 콘솔창에 caculator의 값이 출력된다.

 

 

빈 의존성 배열이 있는 경우

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

const App = () => {
  useEffect(() => {
    console.log(calculator);
  }, []);

  const [calculator, setCalculator] = useState(0);

  const onClickPlus = () => {
    setCalculator(calculator + 1);
  };

  const onClickMinus = () => {
    setCalculator(calculator - 1);
  };

  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <button onClick={onClickMinus}>-</button>
      <div className="mx-10">{calculator}</div>
      <button onClick={onClickPlus}>+</button>
    </div>
  );
};

export default App;

 

useEffect에 의존성 배열부분을 추가하였다.

useEffect(() => {
    console.log(calculator);
  }, []);

useEffect는 의존성 배열에 있는 값이 변할때마다 useEffect가 실행이 된다.

그러나 의존성 배열안에 어떠한 값도 없기 때문에 리렌더링 될따마다 useEffect는 실행이 되지 않는다.

최초 렌더링 되었을때 useEffect가 실행되는거 말고는 calculator의 값을 변화 시킬때마다 useEffect가 실행되지 않는다

 

의존성 배열 안에 값이 있는 경우

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

const App = () => {
  const [calculator, setCalculator] = useState(0);

  const onClickPlus = () => {
    setCalculator(calculator + 1);
  };

  const onClickMinus = () => {
    setCalculator(calculator - 1);
  };

  useEffect(() => {
    console.log(calculator);
  }, [calculator]);

  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <button onClick={onClickMinus}>-</button>
      <div className="mx-10">{calculator}</div>
      <button onClick={onClickPlus}>+</button>
    </div>
  );
};

export default App;

useEffect에 의존성 배열에 calculator를 추가하였다. 그러면 useEffect는 calculator의 값의 변화를 감지 할때마다 실행이 된다.

useEffect(() => {
    console.log(calculator);
  }, [calculator]);

calculator의 값이 변할때마다 useEffect가 실행되어 콘솔창에 calculator의 값이 출력되는 것을 볼수 가있다.

 

※ 주의

"의존성 배열이 없는 경우"는 리렌더링이 될때마다 useEffect가 실행되는 것이고

"의존성 배열 안에 값이 있는 경우"는 의존성 배열 값의 변화를 감지 할 때마다 useEffect가 실행이된다.