s.soomin / portfolio
← 개발 기록

URL 입력부터 React 가상 DOM 렌더링까지의 과정

1. URL 입력

사용자가 브라우저 주소창에 URL(예: https://example.com)을 입력하고 엔터를 누릅니다.

2. DNS 조회

  1. 브라우저는 먼저 자체 DNS 캐시를 확인합니다.
  2. 캐시에 없으면 운영체제의 DNS 캐시를 확인합니다.
  3. 여전히 없으면 라우터의 DNS 캐시를 확인합니다.
  4. 모든 캐시에서 찾지 못하면 ISP의 DNS 서버에 쿼리를 보냅니다.
  5. ISP의 DNS 서버는 루트 DNS 서버부터 시작하여 최종적으로 해당 도메인의 IP 주소를 찾아냅니다.

3. TCP 연결 설정

브라우저는 찾아낸 IP 주소로 TCP 연결을 시도합니다. 이 과정에서 3-way handshake가 일어납니다.

4. TLS 협상 (HTTPS의 경우)

HTTPS 연결의 경우, TLS(Transport Layer Security) 협상 과정이 추가로 진행됩니다.

5. HTTP 요청 전송

브라우저가 서버에 HTTP GET 요청을 보냅니다.

6. 서버 응답

서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 포함한 응답을 보냅니다.

7. 브라우저의 렌더링 과정

  1. HTML 파싱: DOM(Document Object Model) 트리 생성
  2. CSS 파싱: CSSOM(CSS Object Model) 생성
  3. JavaScript 실행
  4. 렌더 트리 구축
  5. 레이아웃 계산
  6. 페인팅

8. React 애플리케이션 초기화

  1. React 스크립트 로드 및 실행
  2. React 앱의 진입점(예: index.js) 실행

9. React 컴포넌트 렌더링

  1. 루트 컴포넌트 렌더링 시작
  2. 각 컴포넌트의 render 메소드 호출
  3. JSX를 JavaScript 객체로 변환 (React.createElement 호출)

10. 가상 DOM 생성

  1. 컴포넌트 트리를 기반으로 가상 DOM 객체 생성
  2. 이 객체는 실제 DOM의 가벼운 복사본

11. 가상 DOM과 실제 DOM 비교 (첫 렌더링의 경우 생략)

React는 가상 DOM과 실제 DOM을 비교하여 변경된 부분을 파악합니다.

12. DOM 업데이트

변경이 필요한 부분만 실제 DOM에 적용합니다.

13. 브라우저 렌더링

브라우저는 변경된 DOM을 기반으로 화면을 다시 그립니다.

이 전체 과정은 매우 빠르게 진행되며, 사용자는 거의 즉각적으로 웹 페이지를 보게 됩니다. React의 가상 DOM 사용으로 인해 DOM 조작이 최적화되어 효율적인 렌더링이 가능해집니다.