[React] React Lifecycle 제어하기 - useEffect

◈ React의 생애주기

React 컴포넌트의 생애주기를 다루는 메소드들은 클래스형 컴포넌트에서만 사용 가능하다. 그러나 우리는 함수형 컴포넌트에서도 이런 기능을 사용할 수 있도록 만들어진 React Hooks를 사용한다.

React Hooks는 클래스형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등등을 해결하기 위해 등장했다.

이 중 React의 생애주기를 관리하는 함수는 useEffect이다.

 

◈ useEffect

useEffect의 형식은 다음과 같다.

useEffect를 연습해보기 위해 LifeCycle 컴포넌트를 만들어보자.

LifeCycle.js

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

const UnMountTest = () => {
  useEffect(() => {
    console.log("Sub Component Mount");
    return () => {
      console.log("Sub Component Unmount");
    };
  }, []);
  return <div>UN MOUNT TEST</div>;
};

const LifeCycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

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

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

  useEffect(() => {
    console.log("Update!");
  });

  useEffect(() => {
    console.log(`count is update : ${count}`);
  }, [count]);

  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

  return (
    <div>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>count up</button>
      </div>
      <div>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      </div>
      <button onClick={toggle}>ON/OFF BUTTON</button>
      {isVisible && <UnMountTest />}
    </div>
  );
};

export default LifeCycle;

1. Mount(탄생) 시점

 

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

 

컴포넌트의 mount 시점에 콘솔이 실행되고, 콘솔에 "Mount!" 가 뜨는 것을 확인할 수 있다. 컴포넌트의 버튼을 클릭하여 리랜더링 되어도, useEffect의 댑스에 빈배열을 전달하였기 때문에 콜백함수는 컴포넌트의 탄생 시점에만 작동하기 때문에 콘솔에는 한 번만 뜬다. 

 

2. Udate(변화) 시점

 

1) 댑스에 아무것도 전달하지 않은 경우

 

useEffect(() => {
    console.log("Update!");
  });

 

업데이트(state가 변경됨/부모에게서 내려받는 props가 바뀜/부모 컴포넌트가 리랜더링 됨) 될 때마다 콘솔창에 "Update!"가 나타나는 것을 확인할 수 있다.

 

2) 댑스에 특정 값을 넣는 경우

 

useEffect(() => {
    console.log(`count is update : ${count}`);
  }, [count]);

  useEffect(() => {
    console.log(`text is update : ${text}`);
  }, [text]);

 

감지하고 싶은 값을 댑스에 지정하여 그 값이 업데이트 되면 콜백함수가 수행된다.

 

3. UnMount(죽음) 시점

 

const UnMountTest = () => {
  useEffect(() => {
    console.log("Sub Component Mount");
    return () => {
      console.log("Sub Component Unmount");
    };
  }, []);
  return <div>UN MOUNT TEST</div>;
};

 

ON/OFF버튼을 통해 UnMountTest 컴포넌트를 화면에 보이게 하거나 보이지 않게 한다. 

이때 UnMountTest의 탄생 시점에는 "Sub Component Mount"가 콘솔에 출력된다.

죽음 시점에는 return 값을 통해 콘솔에 "Sub Component Unmount"가 출력되도록 한다.