[WEB] 렌더링이란? 브라우저 렌더링, 리액트 렌더링: DOM과 Virtual DOM의 차이

 

 

---

 

렌더링 이란?

• HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 출력하는 과정
• 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정

 

렌더링 방식

CSR (client side randering)

• 웹 서버에서 서버는 단지 JSON 파일만 보내주고, 사용자의 행동에 따라 html을 그리는 역할은 JS를 통해 클라이언트 측에서 수행하는 방식
• SPA : 는 최초 한 번 페이지 전체를 로딩한 후, 데이터만 변경하여 사용할 수 있는 애플리케이션으로, CSR 렌더링 방식을 사용한다. 이 방식에서는 기본적으로 페이지 로드가 없으며, 모든 페이지는 단순히 HTML5 History에 의해 렌더링된다. 따라서 새로운 데이터를 불러와야 할 시점을 스스로 결정하여 구현해야 한다.

장점

1. 필요한, 변경된 데이터만 받아서 그리기 때문에 트래픽이 감소한다.
2. 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

단점

• 검색엔진(SEO)JS 위주로 돌아가는 프로젝트는 JS 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못한다. 구글의 검색엔진에는 JS 엔진이 내장되어 있지만 네이버, 다음 등의 검색엔진은 제대로 크롤링하지 못하기 때문에 SSR을 따로 구현해야한다. 즉, JS 엔진이 돌아가지 않으면 html 파일을 읽을수가 없기때문에 SEO문제가 발생한다.

 

SSR (server side randering)

• 전통적인 웹 방식으 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 렌더링하는 방식

장점

1. SEO 가능(JS엔진 없이 완전한 페이지를 받기 떄문에 SEO가 가능)
2. 성능 개선
3. 첫 렌더링된 html을 클라이언트에게 전달해주기 때문에 초기 로딩속도를 많이 줄여줄 수 있다. JS 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게 된다.

단점

1. 페이지를 이동할 때마다 요청을 보내기 때문에 서버 자원이 사용되 트래픽이 증가한다.
2. 페이지를 이동할 때 화면이 깜빡(새로고침)거리는 문제가 있다.

 

 

SSG (server side generation)

 

ISR (incremental static regeneration)

 

SC(server componet)

 

브라우저 렌더링

브라우저 렌더링 이란?

• 브라우저에서 사용자가 주소창에 URL을 입력한 뒤 페이지가 표출될 때까지의 동작하는 실행 순서

 

브라우저 렌더링 동작 방식

1. URL을 DNS를 통해 IP 주소로 변환한다.
2. Loader가 IP 주소 서버에게 요청하여 웹 자원 정보( html,css,font,img 등 )를 불러 온다.
   *Loader : js파일이 아닌 웹 자원 정보들을 변환할수있도록 도와주는 속성
3. 렌더링 엔진(=웹 엔진)이 HTML(ex. index.html) 파일을 파싱한다, 파싱 시 한 줄씩 DOM Tree가 만들어 진다.
   *렌더링 엔진 : 웹서버로 부터 응답받은 내용을 UI상에 나타내주는 엔진(DOM Tree 각 요소를 DOM node로 전환)
   *DOM( Document Object Model ) : 마크업 형태의 HTML문서를 오브젝트 모델의 형태로 바꾼 것
4. 렌더링 엔진(=웹 엔진)이 CSS/Style 파일을 파싱한다, 파싱 시 한 줄씩 CSSOM Tree가 만들어 진다.
   
   
5. DOM Tree 와 CSSOM Tree 을 결합해 Render Tree가 만들어 진다.
   Render Tree : 시각적 요소 등을 지정한다.
6. Render Tree 의 각 노드 별 Render Tree Layout를 만든다.
   Render Tree Layout : 각 노드가 어느 공간에 위치할지 부여하는 공간 값
   Viewport : 그래픽이 표시되는 브라우저 영역, 크기
   - 모바일의 경우 디스플레이의 크기, pc의 경우 브라우저 창의 크기에 따라 달라진다
   
7. Render Tree 의 각 노드 별 Render Tree Painting를 진행한다.
   Render Tree Painting : 화면간의 실제 픽셀로 변환하는 것, 일부 콘텐츠는 트리 과정 후 먼저 표출 되고, 다른 요소들은 순차적으로 진행 된다.

브라우저 렌더링 순서
1. HTML 파싱 → DOM 생성
2. CSS 파싱 → CSSOM 생성
3. JavaScript 실행 → DOM/CSSOM 조작
4. DOM + CSSOM 결합 → 렌더 트리 생성
5. 레이아웃 (리플로우)
6. 페인팅
7. 컴포지팅

 

 

DOM 이란?

• Document Object Model(문서 객체 모델)
• 웹 브라우저가 HTML 문서를 구조화하고, 이를 조작할 수 있도록 객체 모델을 제공하는 방식입니다.
• DOM은 웹 페이지의 구조를 트리 형태로 표현하며, 이를 통해 JavaScript로 HTML 문서의 내용을 동적으로 변경할 수 있습니다.

 

주요 DOM 메서드와 프로퍼티

• 선택
  • getElementById(id): 특정 ID를 가진 요소를 선택
  • getElementsByClassName(className): 특정 클래스를 가진 모든 요소를 선택
  • getElementsByTagName(tagName): 특정 태그를 가진 모든 요소를 선택
  • querySelector(selector): CSS 선택자에 맞는 첫 번째 요소를 선택
  • querySelectorAll(selector): CSS 선택자에 맞는 모든 요소를 선택
• 조작
  • innerHTML: 요소의 HTML 내용을 설정 또는 가져오기
  • textContent: 요소의 텍스트 내용을 설정 또는 가져오기
  • style: 요소의 인라인 스타일을 설정 또는 가져오기
  • setAttribute(name, value): 요소의 속성을 설정
  • classList: 요소의 클래스 목록을 조작 (예: add, remove, toggle)
• 이벤트 처리
  • addEventListener(type, listener): 특정 이벤트가 발생했을 때 실행할 함수를 등록
  • removeEventListener(type, listener): 등록된 이벤트 리스너를 제거

 

DOM의 역할과 중요성

• DOM은 웹 페이지를 구조화하고 이를 JavaScript로 동적으로 조작할 수 있게 해주는 중요한 개념
• HTML 문서가 트리 구조로 표현되며, JavaScript를 사용하여 이 구조를 변경하거나, 콘텐츠를 추가/삭제할 수 있습니다.
• DOM API를 잘 이해하면, 사용자 인터랙션에 반응하는 동적이고 인터랙티브한 웹 페이지를 만들 수 있다.

 

 

리액트 렌더링

React와 Virtual DOM이란?

• React는 컴포넌트 기반 아키텍처를 채택하여 UI를 작은, 재사용 가능한 컴포넌트로 나누어 개발하는 프레임워크로서, 효율적인 업데이트를 위해 Virtual DOM을 사용한다.
•  Virtual DOM이란?
  • 실제 DOM의 가벼운 사본을 말한다.

• React는 상태가 변경될 때마다 전체 UI를 Virtual DOM에 렌더링한다.
• React의 Reconciliation 알고리즘이 Virtual DOM과 실제 DOM 간의 차이를 비교하여 필요한 부분만 실제 DOM에 업데이트합니다.

 

Reconciliation 알고리즘

• Virtual DOM을 이용해 React에서 상태(state)나 속성(props)이 변경될 때, 변경된 부분만 실제 DOM에 업데이트하는 과정을 말한다.
• 구성 요소
  • Virtual DOM Diffing: 두 Virtual DOM 트리 간의 차이점을 찾는 핵심 과정.
  • Patch Application: 실제 DOM에 최소한의 업데이트를 적용하는 하는 과정.
• 알고리즘 순서
  1. 변경된 상태나 속성을 반영하여 새로운 Virtual DOM 트리를 생성
  2. 새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 차이점을 식별
  3. 식별된 차이점을 실제 DOM에 반영

 

Virtual DOM Diffing

• Reconciliation 과정의 핵심 부분으로, 두 Virtual DOM 트리 간의 차이점을 찾고, 실제 DOM에 최소한의 업데이트를 적용하는 과정 을 말한다.
• Virtual DOM Diffing 순서
  1. 두 개의 다른 타입의 엘리먼트는 다른 트리로 간주하여 전체 서브트리를 교체
  2. 동일한 타입의 엘리먼트 비교하고, 자식 요소를 재귀적으로 비교합니다.
  3. 각 항목에 고유한 key를 할당하여 비교, key가 있는 경우, React는 항목의 위치가 변경되어도 항목을 재사용

•  

 

컴포넌트의 상태가 변경될 때 Virtual DOM이 업데이트되고, diffing이 발생하는 예)

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

 

 

리액트 생명주기

1. 초기 렌더링

• 초기 렌더링은 컴포넌트가 처음 DOM에 삽입될 때 발생하며, 이후 상태나 속성이 변경될 때마다 업데이트 렌더링이 이루어진다.
  
  • constructor(): 컴포넌트 인스턴스가 생성되고 초기 state가 설정
  • componentWillMount() (현재는 사용되지 않음): 컴포넌트가 마운트되기 전에 호출
  • render(): 컴포넌트의 UI가 Virtual DOM에 렌더링
  • componentDidMount(): Virtual DOM을 실제 DOM에 마운트된 후 초기화 작업을 수행, 예) 네트워크 요청 등

 

2. 상태 변경 및 업데이트 렌더링

 

• 상태 변경: 상태(state)가 변경되어 새로운 Virtual DOM이 생성
• render(): 상태 변경에 따라 render() 메서드가 다시 호출되어 새로운 Virtual DOM이 렌더링
• diffing: 새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 차이점을 찾아 실제 DOM에 최소한의 변경만 DOM에 적용

 

React 렌더링 순서
1. 컴포넌트 인스턴스 생성 (constructor)
2. Virtual DOM 렌더링 (render)
3. 실제 DOM 반영 (componentDidMount)
4. 상태/props 변경
5. Virtual DOM Diffing (Reconciliation)
6. 최소한의 변경 사항 실제 DOM에 적용

 

 

브라우저 렌더링과 리액트 렌더링

• React는 Virtual DOM을 이용하여 독립적으로 렌더링을 수행하므로, 브라우저의 DOM 처리와는 별개로 동작한다.

 

리액트 애플리케이션의 동작 과정

1. 리액트 애플리케이션은 React.createElement() 함수 호출로 변환되어 JSX 문법으로 작성
2. React는 JSX 코드를 기반으로 가상 DOM을 생성
3. 가상 DOM이 생성되면, React는 이를 기반으로 실제 DOM에 렌더링을 수행
4. 브라우저는 최종적으로 React가 생성한 실제 DOM을 화면에 표출하기 위해 레이아웃, 페인팅, 컴포지팅 작업
5. 브라우저에 표출