TypeScriptSTUDY _ 헷갈리는 부분 정리[ DOM과 가상 DOM | 리액트 렌더링 과정 | 컴포넌트가 그려지는 타이밍 | React Lifecycle(react 생명주기) | 브라우저에 화면이 표시되는 과정 ]

DOM (Document Object Model)

정의

• DOM은 HTML이나 XML 문서의 구조를 표현한 프로그래밍 인터페이스.

인터페이스(Interface)
: 소프트웨어 개발에서 서로 다른 구성 요소가 소통하거나 상호작용할 수 있도록 설계된 접점 또는 규약을 의미합니다. 프로그래밍 언어, 사용자 경험, 시스템 설계 등 다양한 맥락에서 사용

• 브라우저는 HTML을 파싱하여 트리 구조의 DOM을 생성하며, 이를 통해 개발자는 문서 구조, 스타일, 콘텐츠를 프로그래밍적으로 조작할 수 있습니다.

파싱(Parsing)
: 문자열 형태로 작성된 데이터를 구조화된 형식으로 변환하는 과정.
브라우저에서는 HTML, CSS, JavaScript 코드를 읽고 분석하여 문서 구조(DOM)를 생성하거나 스타일을 적용하는 과정.

특징

1. 트리 구조: 문서의 각 요소가 노드로 표현되며, 계층적 구조를 가짐.
2. 조작 가능: JavaScript를 통해 DOM 노드를 생성, 삭제, 변경할 수 있음.
3. 직접 업데이트: DOM 조작은 브라우저가 매번 레이아웃, 스타일, 페인팅 과정을 실행하게 하여 성능 비용이 큼.

가상 DOM (Virtual DOM)

정의

• 가상 DOM은 React에서 사용하는 개념으로, 실제 DOM의 가벼운 사본을 메모리에 유지하며 UI 업데이트를 효율적으로 처리하기 위한 기술입니다.

작동 방식

1. Virtual DOM 업데이트:

   • 상태(state)나 속성(props)이 변경되면 React는 새로운 가상 DOM을 생성.

2. Diffing 알고리즘:
   : DOM에서 변경된 부분을 효율적으로 찾아 실제 DOM에 최소한의 업데이트를 적용하기 위해 사용하는 최적화된 비교 방법.

   • 기존 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 식별.

3. Patch:
   :Patch는 두 데이터 구조(예: 가상 DOM)의 차이점(Diffing)을 기반으로 변경 사항만을 적용하기 위해 생성되는 업데이트 명령 또는 수정 단위를 의미.

• React에서는 Diffing 알고리즘을 통해 변경 사항을 식별한 뒤, 이를 실제 DOM에 반영하기 위해 패치 작업을 수행.
  -> 변경된 부분만 실제 DOM에 반영.

DOM vs 가상 DOM

특징	DOM	가상 DOM
정의	브라우저가 사용하는 문서 모델.	메모리에 유지되는 DOM의 사본.
조작 방식	직접 DOM 노드를 수정.	가상 DOM에서 변경 후 비교(diff).
성능	빈번한 조작은 성능 저하를 유발.	최소한의 DOM 업데이트로 효율적.
사용 사례	JavaScript 기반 직접 조작.	React와 같은 라이브러리에서 사용.

가상 DOM의 장점

1. 성능 최적화:
   : 변경된 부분만 DOM에 반영하므로 불필요한 렌더링이 줄어듦.
2. 추상화:
   : 복잡한 DOM 조작을 추상화하여 더 간단한 코드 작성 가능.

"복잡한 DOM 조작을 추상화"
: DOM을 직접 다루는 복잡한 과정을 감추고, 간단한 API나 선언적 방식으로 처리할 수 있도록 도와준다는 의미.
개발자가 DOM의 세부적인 구조나 조작 방식을 몰라도, 필요한 동작을 간편하게 수행할 수 있게 만들어주는 방식.

3. 프레임워크 지원:
   • React, Vue.js 등 프레임워크에서 사용.

• 결국
  DOM은 브라우저의 문서 구조를 나타내는 트리이고,
  가상 DOM은 React가 효율적인 업데이트를 위해 메모리에서 사용하는 DOM의 경량 사본임.

---

1. 리액트 렌더링 과정

Rendering(렌더링)
: 애플리케이션에서 데이터를 화면에 시각적으로 표시하는 과정

과정 정의

React의 렌더링 과정은 UI를 그리기 위한 선언적 업데이트 프로세스로 이루어짐.

선언적 업데이트
: "어떻게(how)"가 아니라 "무엇(what)"을 보여줘야 하는지를 선언적으로 표현하는 방식.
React에서 UI 업데이트를 수행할 때,
개발자는 현재 상태(state)나 props에 따라 UI가 어떻게 보여야 할지 선언적으로 정의하고,
React는 내부적으로 DOM을 효율적으로 업데이트함.

이를 통해 React는 상태나 props가 변경될 때, 변경된 부분만 DOM에 업데이트.

< 주요 단계 >

1. 초기 렌더링

   • 컴포넌트가 처음 DOM에 추가될 때 발생.
   • ReactDOM.render() 호출 시 컴포넌트 트리를 탐색하며 가상 DOM(Virtual DOM)을 생성.

2. 가상 DOM 비교 (Reconciliation)

   • 상태(state) 또는 props가 변경되면, React는 이전 가상 DOM과 새 가상 DOM을 비교(diffing)하여 변경 사항을 계산.

   Reconciliation(조화 과정)
   :React가 가상 DOM(Virtual DOM)과 실제 DOM 간의 차이(Diff)를 비교하여 효율적으로 변경 사항을 업데이트하는 프로세스.

3. 렌더링 및 커밋

   • 변경된 요소를 실제 DOM에 반영(Commit).
   • 브라우저가 화면에 업데이트를 표시.

예시

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default App;

• 초기 렌더링: 컴포넌트가 처음 화면에 그려짐.
• 상태 변경: setCount 호출로 count가 업데이트.
• Reconciliation: 변경된 가상 DOM과 이전 가상 DOM 비교.
• DOM 업데이트: Count: 0이 Count: 1로 바뀜.

---

2. 컴포넌트가 그려지는 타이밍

과정 정의

React에서 컴포넌트가 그려지는 타이밍은 다음 단계에 따라 결정 :

1. 초기 렌더링: 컴포넌트가 DOM에 추가될 때 실행.

   • useEffect는 DOM 업데이트 이후 실행.
   • useLayoutEffect는 DOM이 업데이트되기 전에 동기적으로 실행.

2. 재렌더링 (Re-rendering): 상태나 props가 변경될 때 실행.

   • 변경된 데이터에 따라 가상 DOM이 다시 생성되고 비교.

3. 언마운트: 컴포넌트가 DOM에서 제거될 때 실행.

   • useEffect에서 반환된 클린업 함수 실행.

예시

import React, { useEffect } from "react";

const MyComponent = ({ value }) => {
  useEffect(() => {
    console.log("컴포넌트가 렌더링됨");

    return () => {
      console.log("컴포넌트가 언마운트됨");
    };
  }, [value]);

  return <div>{value}</div>;
};

export default MyComponent;

• value 변경 → 컴포넌트 재렌더링.
• return 부분 → 언마운트 시 클린업 작업 실행.

---

3. React Lifecycle (React 생명주기)

과정 정의

React의 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정

< 주요 단계 >

1. 마운트(Mount): 컴포넌트가 DOM에 삽입되는 단계.

   • 함수형: 컴포넌트 함수가 호출되고 useEffect 실행.
   • 클래스형: constructor → render → componentDidMount.

2. 업데이트(Update): 상태 또는 props 변경으로 컴포넌트가 다시 렌더링되는 단계.

   • 함수형: useEffect에서 의존성 배열에 따라 실행.
   • 클래스형: componentDidUpdate.

3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거되는 단계.

   • 함수형: useEffect의 반환 함수 실행.
   • 클래스형: componentWillUnmount.

결과 :

• 마운트: 컴포넌트가 처음 생성 → useEffect 실행.
• 업데이트: setCount 호출 → count 변경 → useEffect 다시 실행.
• 언마운트: 컴포넌트 제거 → useEffect의 클린업 실행.

요약 :

• 리액트 렌더링 과정: 가상 DOM 생성 → 비교 → 변경된 부분만 DOM 업데이트.
• 컴포넌트 렌더링 타이밍: 상태나 props 변경 시 재렌더링, DOM 업데이트 이후 useEffect 실행.
• React 생명주기: 마운트, 업데이트, 언마운트로 구분되며, 각 단계에서 특정 작업을 처리.

---

4.브라우저에 화면이 표시되는 과정

: 브라우저가 HTML, CSS, JavaScript 등을 받아 화면에 표시 가능한 최종 그래픽을 생성하는 일련의 단계

1. HTML 파싱 (Parsing)

: 브라우저가 HTML 파일을 해석하여 DOM(Document Object Model) 트리를 생성.

• HTML은 위에서 아래로 순차적으로 읽히며, <script> 태그를 만나면 JavaScript 실행으로 인해 파싱이 잠시 중단될 수 있음.

2. CSS 파싱 및 스타일 계산

• 과정:
  • HTML에서 연결된 CSS 파일(또는 <style> 태그의 내용)을 파싱.
  • CSSOM(CSS Object Model)을 생성하여 DOM과 결합.
  • DOM + CSSOM = 렌더 트리(Render Tree) 생성.
  • 각 요소에 적용될 스타일 계산.

  CSSOM (CSS Object Model)
  : 브라우저가 CSS 스타일 규칙을 파싱하여 생성한 객체 모델
  CSSOM은 DOM(Document Object Model)과 함께 브라우저가 웹페이지의 레이아웃과 스타일을 결정하는 데 사용.

3. 레이아웃 (Layout, Reflow)

• 과정:
  • 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산.
  • 뷰포트(Viewport)에 맞춰 배치.
  • 예: <div> 안에 다른 요소가 있다면, 부모와 자식의 크기와 위치를 모두 계산.

4. 페인팅 (Painting)

• 과정:
  • 레이아웃 정보를 기반으로 각 요소의 스타일(색상, 그림자, 배경 등)을 픽셀 단위로 렌더링.
  • 브라우저는 실제로 화면에 보이는 그래픽 데이터를 생성.

5. 합성 (Compositing)

• 과정:
  • GPU를 사용해 여러 레이어를 병합하여 최종 화면을 표시.
  • 브라우저는 필요 시 레이어를 분리해 성능을 최적화(GPU 가속).

브라우저 렌더링 과정의 순서 요약

1. HTML 파싱 → DOM 생성.
2. CSS 파싱 → CSSOM 생성.
3. DOM + CSSOM → 렌더 트리 생성.
4. 렌더 트리 기반으로 레이아웃 계산.
5. 레이아웃 정보를 바탕으로 페인팅.
6. 최종 그래픽을 생성하여 화면 표시.

예시

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

1. HTML 파싱: <h1> 태그를 DOM에 추가.
2. CSS 파싱: h1 스타일을 CSSOM에 추가.
3. 렌더 트리 생성: DOM과 CSSOM을 결합해 h1 요소의 스타일 적용.
4. 레이아웃: h1의 크기와 위치 계산.
5. 페인팅 및 합성: h1을 파란색 텍스트로 화면에 표시.

• 성능 최적화:
  • CSS와 JS 파일을 분리하고 압축.
  • 중요한 콘텐츠를 우선 로드하는 Critical Rendering Path 최적화.
  • 이미지 및 애니메이션에 GPU 가속 활용.