[React] Lifecycle 생애주기 및 사용방법

Mount -> Update -> UnMount

화면에 생성 -> 변화 -> 화면에서 제거

 

useEffect

 

Mont & Update

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

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

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

//Update당시 조건에 따른 예외처리
  useEffect(() => {
    console.log(`count is update : ${count}`);
    if (count > 5) {
      alert("count err");
      setCount(1);
    }
  }, [count]);

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

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

export default Lifecycle;

Mount & UnMount

 

return을 다시 보내면 UnMount 시점을 알 수 있다.

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

const UnmountTest = () => {
  useEffect(() => {
    console.log("mount");

    return () => {
      console.log("Unmount!");
    };
  }, []);

  return <div>Unmount Testing Componenet</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 />}
    </div>
  );
};

export default Lifecycle;