[React] component Life Cycle / useEffect를 통한 component Life Cycle 제어

Component Life Cycle

리액트 컴포넌트의 라이프사이클은

Mount -> Update -> Unmout로 진행된다.

• Mount : 컴포넌트가 최초에 렌더링 됨
• Update : 컴포넌트가 리렌더링 됨
• Unmount : 컴포넌트가 화면에서 제거 됨

 

 

 

useEffect를 통한 component Life Cycle 제어

useEffect :   두 번째 인수인 [] 배열의 값이 바뀌면, 첫 번째 매개변수의 함수를 호출

예)

  useEffect(() => {
    console.log(`count: ${count} / input ${input}`);
  }, [count, input]); // 의존성 배열, dependency array(deps)

 

 

예) 클릭을 홀수 번 할 때 없어지는 컴포넌트

 

App.jsx

import { useState, useEffect, useRef } from "react";
import "./App.css";
import Even from "./components/Even";

function App() {
  const [count, setCount] = useState(0);
  const isMount = useRef(false);

  // 1. 마운트 : 탄생
  useEffect(() => {
    console.log("App Mount");
  }, []);

  // 2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("App Update");
    console.log("Update");
  }); // deps 생략하면, 리렌더링 시 매번 실행 됨

  const onClickButton = () => {
    setCount(count + 1); // setState는 비동기로 실행되기 때문에
    console.log(count); // count값이 바로 변하지 않음
  };

  return (
    <div className="App">
      <h1>Simple Counter {count}</h1>
      <button onClick={onClickButton}>클릭</button>
      <section>{count % 2 === 0 ? <Even /> : null}</section>
    </div>
  );
}

export default App;

 

Even.jsx

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    console.log("Even Mount");
    return () => {
      // 3. 언마운트 : 제거
      // 클린업, 정리함수
      console.log("Even Unmount");
    };
  }, []);
  return <div>짝수입니다.</div>;
};

export default Even;