렌더링(Rendering)이란?

렌더링(Rendering)이란?

렌더링은 데이터(코드, 상태, 콘텐츠)를 시각적인 출력(UI)으로 변환하는 과정을 의미합니다.
웹 개발에서는 주로 HTML/CSS/JavaScript를 브라우저가 해석해 화면에 그리는 과정을 말하며, 프론트엔드 프레임워크(React, Vue 등)에서는 가상 DOM과 결합해 효율적으로 화면을 업데이트하는 기술을 포함합니다.

---

1. 웹에서의 렌더링 유형

(1) 서버 사이드 렌더링 (SSR, Server-Side Rendering)

• 서버에서 HTML을 생성해 클라이언트에 전달합니다.
• 장점: 초기 로딩 빠름, SEO 친화적.
• 예: Next.js, Nuxt.js, 전통적인 PHP/JSP 웹사이트.

sequenceDiagram
    Client->>Server: 페이지 요청
    Server->>Database: 데이터 조회
    Server->>Client: 완성된 HTML 전송
    Client->>Browser: 화면 표시

(2) 클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)

• 브라우저(클라이언트)에서 JavaScript로 동적 UI 생성합니다.
• 장점: 인터랙션 후 화면 전환 빠름.
• 단점: 초기 로딩 느림, SEO 문제 가능성.
• 예: React, Vue, SPA(Single Page Application).

sequenceDiagram
    Client->>Server: 최소한의 HTML 요청
    Server->>Client: 빈 HTML + JS 번들 전송
    Client->>Browser: JS 실행 후 DOM 동적 생성

(3) 정적 사이트 생성 (SSG, Static Site Generation)

• 빌드 시점에 미리 HTML 생성합니다.
• 예: Gatsby, Hugo, 블로그/문서 사이트.

---

2. 렌더링 프로세스 (브라우저 기준)

1. HTML 파싱 → DOM 트리 생성.
2. CSS 파싱 → CSSOM 트리 생성.
3. DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성.
4. 레이아웃 계산 (Reflow): 요소의 크기/위치 결정.
5. 페인팅 (Repaint): 픽셀 단위로 화면에 그리기.

graph TD
    A[HTML] --> B(DOM 트리)
    C[CSS] --> D(CSSOM 트리)
    B --> E(렌더 트리)
    D --> E
    E --> F[레이아웃]
    F --> G[페인팅]

---

3. 프론트엔드 프레임워크와 렌더링

• React/Vue: 가상 DOM을 사용해 실제 DOM 조작을 최소화합니다.
  • 변경된 부분만 비교(Diffing 알고리즘) 후 효율적으로 업데이트합니다.
• 최적화 기술:
  • Memoization: React.memo, useMemo.
  • Lazy Loading: 동적 임포트로 초기 로딩 시간 감소.

---

4. 렌더링 관련 핵심 용어

• 리플로우(Reflow): 레이아웃 재계산 (예: 창 크기 변경).
• 리페인트(Repaint): 시각적 스타일 변경 (예: 색상 수정).
• 하이드레이션(Hydration): SSR된 HTML에 JavaScript 이벤트/상태를 연결하는 과정.

---

5. 렌더링 최적화 팁

1. CSS: transform, opacity는 리플로우 없이 변경 가능.
2. JavaScript: requestAnimationFrame으로 애니메이션 최적화.
3. React: 불필요한 리렌더링 방지 (key 적절히 사용).

---

⚡ 요약

• 렌더링은 "코드 → 화면" 변환 과정입니다.
• SSR vs CSR vs SSG는 목적에 따라 선택합니다.
• 가상 DOM은 성능을 위해 변경 사항만 실제 DOM에 반영합니다.
• "60fps 유지"가 렌더링 최적화의 핵심 목표입니다.

💡 "렌더링은 웹의 마지막 마일을 책임지는 과정입니다."
브라우저와 프레임워크는 이 과정을 효율적으로 만들기 위해 끊임없이 진화 중입니다. 🚀