1. 라이프 사이클

React는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다.

각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

라이프 사이클은 위 그림과 같이 총 9개가 존재한다.

크게 3가지 유형으로 나눌 수 있다.

2. 마운트 (생성)

2-1) 개념

1. 마운트(Mount): 컴포넌트가 렌더 트리에 처음 삽입되어 실제 DOM에 반영되는 과정

2. 목적: 초기 데이터 로드, 이벤트 리스너 등록, 외부 라이브러리 초기화 등

3. 마운트 될 때 발생하는 생명주기

   • constructor
   • getDerivedStateFromProps
   • render
   • componentDidMount

4. 과정

   constructor → getDerivedStateFromProps → render → DOM 반영(commit) → componentDidMount

   • constructor(클래스형) 혹은 함수형 컴포넌트 본문 실행 → VDOM 생성
   • Reconciliation → 실제 DOM에 삽입(Commit)
   • 브라우저가 삽입된 DOM을 파싱/렌더 트리 구성 → 레이아웃 → 페인트 → 컴포지팅
   • componentDidMount / useEffect( … , []) 등 마운트 후 훅 실행

2-2) 발생 시점

1. 애플리케이션 진입 혹은 라우트(Route) 진입
2. 조건부 렌더링으로 처음 표시될 때