<aside> 🔥 useEffect?

컴포넌트가 렌더링 될때마다 특정 작업을 수행할수 있도록 설정해주는 Hook.

클래스형 컴포넌트의 componentDidMount + componentDidUpdate를 합친 형태

기본 작성 방법

useEffect(() => {},[])

</aside>

<aside> 🔥 사용해보기

렌더링 시에 useEffect가 작동된다.

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

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  useEffect(() => {
    console.log("렌더링이 완료되었습니다!");
    console.log({
      name,
      nickname,
    });
  });

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

</aside>

<aside> 🔥 마운트 될때만 사용하고 싶을 때

두번째 파라미터로 빈 배열을 넣어주면 업데이트 될 떄 실행되지 않는다.

useEffect(() => {
    console.log("렌더링이 완료되었습니다!");
    console.log({
      name,
      nickname,
    });
  }, []);

</aside>

<aside> 🔥 특정 값이 업데이트 될때만 실행하고 싶을 때.

두번째 파라미터의 배열에 검사하고 싶은 값을 넣어주면 된다.

배열 안에는 useState를 통해 관리하고 있는 state를 넣어주어도 되고, props로 전달받은 값도 가능.

const [name, setName] = useState("");

useEffect(() => {
    console.log("렌더링이 완료되었습니다!");
    console.log({
      name,
      nickname,
    });
  }, [name]);

</aside>

<aside> 🔥 뒷정리하기

useEffect는 기본적으로 렌더링 되고 난 직후마다 실행된다.

두번째 파라미터 배열에 어떤 값을 넣는지에 따라 실행되는 조건이 달라진다.

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면

useEffect에서 뒷정리 함수를 반환해주어야 한다.

</aside>