[react] useEffect - Lifecycle 제어하기

react에서 Lifecycle이라고하면 mount, update, unmount로 나눌 수 있다. 

 

mount - 화면에 나타남 

update - 업데이트, 리랜더 

unmount - 화면에서 사라짐

 

useEffect함수는 react hook으로

클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서 사용할 수 있게한다. 

 

useEffect(function, deps) 형태로 

 

1. mount 시점에 실행

useEffect(() => {
    console.log("mount!");
  },[]);

 

-  deps가 빈 배열 일 경우 mount 시점에 콜백함수 실행 

 

2. update 되는 순간 실행

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

 

- deps가 없을 경우, deps에 특정 props, states

- 컴포넌트가 업데이트 되는 순간 (state 변경, 내려받는 props가 변경, 부모가 리랜더링)

 

 

3. unmount 시점에 실행

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

const UnmountTest = () => {
  useEffect(() => {
    console.log("mount!"); // mount 시점에 실행 
    return () => {
      // Unmount 시점에 실행
      console.log("Unmount");
    };
  }, []);
  return <div>UnmountTest</div>;
};

const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);

  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON/OFF</button>
      {isVisible && <UnmountTest />} // true일경우 UnmountTest 컴포넌트가 나타남
    </div>
  );
};

export default Lifecycle;

 

 

사용 예시 

const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);
  };

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

 

- api를 이용해 데이터를 가져오는 작업을 mount 시점에 수행