1. 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>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        {name}
        <br />
        {nickname}
      </div>
    </>
  );
};

export default Info;

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 함
• componentDidMount, componentDidUpdate 합친 형태임

1.1. 마운트될 때만 수행

  useEffect(() => {
    console.log("렌더링 완료");
    console.log({ name, nickname });
  }, []);

• 2번째 인자에 빈 배열 : 컴포넌트가 맨 처음 화면에 등장할 때만 실행하고 업데이트할 때는 실행하지 않기 위함

1.2. 특정 값 업데이트 시만 수행

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

• 검사하고 싶은 값을 두번째 인자에 넣어주면 됨
• state, props 상관 없음

1.3. 뒷정리

• 컴포넌트가 언마운트되기 전이나 업데이트 되기 전에 수행하고 싶은 경우, 뒷정리 함수를 반환해야함

  useEffect(() => {
    console.log({ name, nickname });
    return() => {
    	console.log('cleanup');	
    }
  });

import React, { useState } from "react";
import Info from "./Info";

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setVisible(!visible);
        }}
      >
        {visible ? "보임" : "숨김"}
      </button>
      <hr />
      {visible && <Info />}
    </div>
  );
}

• App 부분에서 버튼의 상태에 따라 컴포넌트 보이도록 설정.
• 숨김 버튼이 생기면 cleanup 함수가 호출되고, 보임 버튼이 생기면 effect가 실행됨.
• 뒷정리 함수가 실행될 때는, 업데이트 직전의 값들이 보임

  useEffect(() => {
    console.log({ name, nickname });
    return() => {
    	console.log('cleanup');	
    }
  }, []);

• 오직 언마운트될 때만 뒷정리함수를 호출하고 싶다면 두번째 인자를 []로 넣으면 됨.