React LifeCycle

---

🔄 Life Cycle이란?

정의

React Life Cycle은 컴포넌트가 생성되고, 화면에 나타나고, 업데이트되고, 제거되는 흐름이다.

컴포넌트가 언제 실행되고 언제 정리되는지 이해하면 데이터 요청과 이벤트 처리도 훨씬 자연스러워진다.

🧩 주요 단계

• Mount: 컴포넌트가 처음 화면에 올라가는 시점
• Update: 상태나 props 변화로 다시 렌더링되는 시점
• Unmount: 컴포넌트가 화면에서 사라지는 시점

⚙️ 함수형 컴포넌트에서의 관점

• useEffect를 통해 Mount와 Unmount 시점을 다룬다.
• 의존성 배열에 따라 Update 시점도 제어할 수 있다.
• 정리 함수(return 함수)를 통해 이벤트 리스너나 구독을 해제한다.

🧪 예시

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("mount");

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

  return <div>Example</div>;
}

🛠️ 왜 중요한가?

• 데이터 요청 시점을 잡기 좋다.
• 이벤트 등록과 해제를 깔끔하게 처리할 수 있다.
• 컴포넌트가 반복 렌더링될 때 불필요한 동작을 줄이는 데 도움이 된다.

📌 정리

• React 생명주기는 Mount, Update, Unmount로 이해하면 된다.
• 함수형 컴포넌트에서는 useEffect가 핵심 역할을 한다.
• useEffect 문서와 같이 보면 흐름이 잘 잡힌다.

---

연결문서

• useEffect
• React-Component
• React-EventHandler