[React] Hooks - useEffect

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이며,

두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐

클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방함

import { useState, useEffect } 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;

✔ 추가 된 부분

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

  ➡ 처음 렌더링이 되었을 때, 글씨가 한글자씩 써질때 계속계속 작업 수행

---

마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트 될때는 실행하지 않으려면 함수의 두번째 파라미터로 비어 있는 배열을 넣어 줌

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

➡ 컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타나고, 그 이후에는 나타나지 않음

---

특정 값이 업데이트될 때만 실행하고 싶을 때

useEffect의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨

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

➡ 배열 안에는 useState를 통해 관리하고 있는 상태를 넣어 줘도 되고, props로 전달받은 값을 넣어줘도 됨

---

뒷정리하기

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 주어야 함

*예제*
 <Info.js>
 
useEffect(() => {
   console.log('effect');
  	console.log(name);
   return () => {
    console.log('cleanup');
    console.log(name);
   };
 }, [name]);

<App.js>
import { useState } from "react";
import Info from "./08/Hooks/Info";

const App = () => {
 const [visible, setVisible] = useState(false); // 초기값 false
 return (
   <div>
     <button
       onClick={() => {
         setVisible(!visible); // true
       }}
     >
       {visible ? "숨기기" : "보이기"} //true일때 숨기기 버튼 보임, false일때 보이기 버튼 보임
     </button>
     <hr />
     {visible && <Info />} // Visible이 true일때 Info component 보임
   </div>
 );
};
export default App;

➡ 렌더링될 때마다 뒷정리 함수가 계속 나타남 또, 뒷정리 함수가 호출될 때 업데이트되기 직전의 값을 보여줌

➕ 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어 있는 배열을 넣으면 됨

 useEffect(() => {
    console.log("effect");
    return () => {
      console.log("unmount");
    };
  }, []);