[React.js] React 생명주기 제어하기 - useEffect

리액트의 생명주기(LifeCycle)

모든 리액트 컴포넌트는 생성(mount), 업데이트(update), 제거(unmount)의 생명주기를 갖는다.

클래스형 컴포넌트는 생명주기 메소드를 통해 생명주기를 제어할 수 있고, 함수형 컴포넌트는 React Hook 중 useEffect를 활용하여 생명주기를 제어한다.

 

useEffect로 생명주기 제어하기

useEffect의 기본 형태는 다음 네 가지 형태로 사용할 수 있다.

1. useEffect(callBackFunc);
2. useEffect(callBackFunc, []);
3. useEffect(callBackFunc, [state]);
4. useEffect(callBackFunc, {return(() => func())};

1번의 경우, 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트된 후, 컴포넌트가 언마운트 되기 전에 콜백 함수가 실행 된다. 

2번의 경우, 컴포넌트가 최초로 마운트될 때만 콜백 함수가 실행된다.

3번의 경우, 컴포넌트가 최초로 마운트될 때 + 의존성 배열에 넣어준 state가 변경되었을 때 콜백 함수가 실행된다.

4번의 경우, 컴포넌트가 어떠한 함수를 리턴하는 형태로 해당 함수는 언마운트되기 직전에 수행된다.

 

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;

 

※ useEffect 실행 시점

useEffect로 전달된 함수는 컴포넌트 렌더링 - 화면 업데이트 - useEffect 실행 순으로 실행된다.

즉, useEffect 실행이 최초 렌더링 이후에 된다는 것으로 만약 화면이 나타나기 전에 동기화 되어야 하는 경우에는 useLayoutEffect()를 활용하여 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트 순으로 effect를 실행시킬 수 있다.

---