📘 React 렌더링과 함수 컴포넌트 생명주기

1. 렌더링

렌더링 = 컴포넌트 호출

이라고 표현한다.

2. 렌더링 프로세스 구조

render phase → commit phase

render phase

• 컴포넌트를 호출
• JSX 평가
• 변경사항 계산
• Virtual DOM 생성

commit phase

• render phase에서 계산한 변경사항을 실제 DOM에 적용

3. JSX는 실제로 무엇이 되는가?

function App() {
  return <h1>Hello World</h1>;
}

React 17 이전

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

React 17 이후

function App() {
  return <h1>Hello World</h1>;
}

import { jsx as _jsx } from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

4. React 렌더링 vs 브라우저 렌더링

React 렌더링과 브라우저 렌더링은 완전히 다르다.

React render
→ React commit (DOM 업데이트)
→ Browser render (paint)

• React render = 계산
• Browser render = 화면 출력

5. 렌더링을 다시 정의하면

렌더링이란

컴포넌트를 호출하여 JSX를 ReactElement로 변환하고,VDOM을 재조정(reconcile)하는 과정이다.(현재는 fiber 구조 기반)

reconciler: 컴포넌트 호출 + VDOM 재조정
renderer: 실제 DOM에 마운트

6. render는 commit보다 느리다

• 렌더링 작업을 여러 조각으로 나눔
• 중간에 멈췄다가 다시 시작
• 더 높은 우선순위 작업이 오면 현재 렌더링 취소

• render phase를 여러 번 호출할 수 있고
• commit하지 않고 버릴 수도 있다

📘 함수 컴포넌트의 생명주기

1. 컴포넌트 생명주기

컴포넌트가 생성, 변경, 제거되는 전체 사이클

2. 함수 컴포넌트 전체 흐름

Mount

lazy initialize
→ render phase
→ commit phase
→ layoutEffect 실행
→ 브라우저 렌더링
→ effect 실행

Update

render phase
→ commit phase
→ layoutEffect 정리
→ layoutEffect 실행
→ 브라우저 렌더링
→ effect 정리
→ effect 실행

Unmount

layoutEffect 정리
→ effect 정리

Mount 상세

1. lazy initialize

useState(() => {
  console.log("init");
  return 0;
});

• 마운트 시 1번만 실행
• 리렌더링 때는 실행 안 됨

2. render phase

• 함수 컴포넌트 실행
• VDOM 변경사항 계산

3. commit phase

• 실제 DOM 업데이트

4. useLayoutEffect

• DOM 업데이트 직후
• 브라우저 렌더링 이전

5. 브라우저 렌더링

• 실제 화면 출력

6. useEffect

• 브라우저 렌더링 이후
• 보통 API 요청

Update 상세

• effect 실행 전에 항상 정리 함수가 먼저 실행됨

1. useLayoutEffect 정리

• 이전 layoutEffect cleanup

2. useEffect 정리

• 이전 effect cleanup

Unmount

• render 없음
• commit 없음
• 브라우저 렌더링 없음

layoutEffect 정리
→ effect 정리

📘 useEffect

외부 시스템과 컴포넌트를 동기화하는 Hook

• 네트워크
• DOM API
• setTimeout
• addEventListener
• localStorage

useEffect 구조

useEffect(setup, dependencies);

• setup: effect 실행
• cleanup: 이전 렌더링 정리

1. 이전 cleanup 실행
2. 새로운 setup 실행

의존성 배열

effect 내부에서 참조한 모든 반응형 값의 목록

• props
• state
• 계산된 변수
• 내부 함수

📘 useEffect 잘 쓰기

이벤트 핸들러와 구분

render 단계에 계산하기 (1)

// ❌
useEffect(() => {
  setFullName(first + last);
}, [first, last]);

// ✅
const fullName = first + last;

render 단계에 계산하기 (2)

카드 번호 예시

before (useEffect)

setCardBrand
→ render → commit → paint
→ effect → setCardNumber
→ render → commit → paint

useEffect(() => {
  if (length > max) {
    setCardNumber(card.substring(0, max));
  }
}, [cardBrand])

after (render phase update)

setCardBrand
→ render
→ render phase update
→ commit → paint

if (length > max) {
  setCardNumber(card.substring(0, max));
}

📘 useLayoutEffect

브라우저가 화면을 그리기 전에 실행되는 effect

• DOM 업데이트 직후
• Paint 이전
• 완료될 때까지 브라우저 렌더링 지연

언제 사용?

• 스크롤 위치 제어
• 모달 위치 계산
• 툴팁 정렬
• 애니메이션 시작 좌표

깜빡임 예제

useEffect(() => {
  if (value === 0) {
    setValue(Math.random() * 200);
  }
}, [value

• 0 보임
• 다시 랜덤값
• 깜빡임 발생

useLayoutEffect(() => {
  if (value === 0) {
    setValue(Math.random() * 200);
  }
}, [value

• 0 안 보임
• 최종값만 출력

전체 흐름 요약

State 변경
→ render phase (계산)
→ commit phase (DOM 반영)
→ useLayoutEffect
→ 브라우저 렌더링
→ useEffect