[React] React Lifecycle 제어하기

🔮 리액트의 생애 주기란?

기존에는 함수형 컴포넌트를 사용하였는데, 함수형 컴포넌트는 원래 State를 관리할 수 없다. 하지만 지금까지 useState를 통해서 State를 관리했다. -> use 키워드를 사용하여 원래 클래스 컴포넌트가 사용할 수 있는 기능을 사용하는 것을 React Hooks 라고 한다.

🔮 React Hooks를 이용하여 Life Cycle 제어하기

📍 초기 설정

LifeCycle.js 컴포넌트 제작

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

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

  return (
    <div style=>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default LifeCycle;

jsx에서 스타일 넣는 방법 : <div style=>

1️⃣ Mount

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

-> 컴포넌트가 Mount 되는 시점에만! 호출이 된다. 즉, 처음에 랜더링 되었을 때만 useEffect()가 호출되고, 리랜더링(버튼 클릭 등)될 때에는 호출되지 않는다.

❓ 처음 랜더링했을 때 말고도 useEffect() 호출하는 방법 ❓
💡 useEffect() 의 [] 부분에 수행 코드를 채우면 된다.
-> [] 안에 있는 값이 변할 때마다 useEffect()의 구현부가 수행됨 이 부분을 dependency Array 라고 한다.

2️⃣ Update

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

dependency Array만 주지 않으면 업데이트(컴포넌트가 변경될 때마다) 호출 된다.

useEffect(() => {
  console.log(`Count is update : ${count}`);
  if (count > 5) {
    alert("count가 5를 넘었습니다. 따라서 1로 초기화합니다. ");
    setCount(1);
  }
}, [count]);

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

dependency Array가 변경될 때마다 구현부가 수행이 되므로 특정 조건이 되면 제어하는데 편리하다.

3️⃣ unMount

const unMountTest = () => {
  useEffect(() => {
    console.log("Mount");

    //unMount 되는 시점에 실행됨
    return () => {
      console.log("unMount");
    };
  }, []);

  return <div>UnMount Testing Component</div>;
};

LifeCycle.js 컴포넌트에 2개의 컴포넌트를 넣어도 상관 ㄴ. unMount도 마찬가지로 useEffect를 사용하는데, 이때 return을 넣어서 unMount가 되는 시점에 실행되도록 한다.