useEffect 란?

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다.

React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은

목적으로 제공되지만, 하나의 API로 통합된 것입니다.

예를 들어,

ex) 버튼을 누르면 색갈이 바뀌는

Code

import { useState, useEffect } from "react";
import "./App.css";

export default function FunctionComponent() {
  const [color, setColor] = useState();

  const changeColor = (color) => {
    setColor(color);
  };

  useEffect(() => {
    console.log("컴포넌트가 마운트 되었습니다.");
  }, []);

  useEffect(() => {
    console.log("컴포넌트가 마운트 되었습니다.");
  }, [color]);

  return (
    <div>
      <div
        style={{
          width: "200px",
          height: "100px",
          margin: "auto",
          backgroundColor: color,
          border: "solid 1px black",
        }}
      ></div>
      <div>
        <button className="button" onClick={() => changeColor("red")}>
          빨간색
        </button>
        <button className="button" onClick={() => changeColor("blue")}>
          파란색
        </button>
        <button className="button" onClick={() => changeColor("green")}>
          초록색
        </button>
        <button className="button" onClick={() => changeColor("black")}>
          검은색
        </button>
      </div>
    </div>
  );
}

지금의 코드로 useEffect를 설명해보자면

일단 useEffect에 console.log를 찍어 확인해보면

색갈을 바꿀때마다(페이지가 랜더링 될때마다)

컴퍼넌트의 숫자가 오르는것을 확인할수 있다.

그 뜻은 useEffect가 console.log를 실행시키고 있다.

하지만 우리가 매번 console.log를 실행시키기 않게 하고싶을 때가 있겠죠?

  useEffect(() => {
    console.log("컴포넌트가 마운트 되었습니다.");
  }, []);

그때 [] 빈 대괄호를 파리미터를 넣어주면 된다.

뜻은 이 페이지가 처음 한번만 실행해줘

특정상황이 있을때만 코드를 실행하기 원할때

  useEffect(() => {
    console.log("컴포넌트가 마운트 되었습니다.");
  }, [color]);

color라는 변수에 변화가 있을때만 안에있는 코드를 실행할수있게 만들수 있다.

만약 age, height 등등. 자기가 원하는 변수를 넣어서 사용할수 있다.

즉. 맨 처음 위에 설명한

componentDidMount,
componentDidUpdate,
componentWillUnmount와 똑같은 뜻이다.

ex)버튼 CSS

.button {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  height: 40px;
  width: 140px;
}