25.02.28 React의 생명주기(Lifecycle)

- react의 생명주기는 총 4개가 존재함.
 

1. 렌더링

• 정의: 함수가 실행되거나 컴포넌트에서 UI를 그려지는 과정
• 초기 렌더링: 처음으로 컴포넌트가 그려지는 것
• 리렌더링: state나 props가 변경되었을 때 다시 그려지는 것

const MyComponent = ({ text }: { text: string }) => {
  console.log("렌더링");
  return <div>{text}</div>;
};

---

 

2. 마운트

• 컴포넌트가 생성되어 DOM레 추가되는 과정 초기에 한 번만 실행된

useEffect(() => {}, [])

관련 용어

용어	설명
초기화 (Initialization)	컴포넌트가 처음 만들어지는 과정
Hydration	서버에서 렌더링된 HTML을 React가 활성화하는 과정 (SSR 관련)

---

 

3. 업데이트 

• 컴포넌트의 state나 props가 변경되어 다시 렌더링 되는 과정
• 리렌더링과 같은 의미

useEffect(() => {}, [state])

관련 용어

용어	설명
Diffing (디핑)	React가 변경된 부분만 찾아내는 과정
Reconciliation (조정)	변경된 부분을 실제 DOM에 반영하는 과정
Virtual DOM (가상 DOM)	React가 변경을 감지하는 내부 구조

---

 

4. 언마운트

• 컴포넌트가 제거될 때 실행되는 과정으로 이벤트 리스너, 타이머 등을 정리해야 할 때 사용
• useEffect의 cleanup 함수 사용

useEffect(() => { return () => {}; }, [])

• 예시

import { useEffect } from "react";

const Timer = () => {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("타이머 실행 중...");
    }, 1000);

    return () => {
      clearInterval(interval); // 언마운트 시 정리
      console.log("타이머 정지");
    };
  }, []);

  return <div>타이머 실행 중...</div>;
};

관련 용어

용어	설명
Cleanup (정리)	불필요한 리소스를 정리하는 과정
Garbage Collection (GC, 가비지 컬렉션)	메모리에서 필요 없는 데이터를 자동으로 제거하는 기능