[web] 브라우저 주소창에 URL을 입력했을 때 일어나는 일 (웹 화면 렌더링 과정 + React의 렌더링)

  📡     웹의 동작 과정      🌐  

1. 사용자가 브라우저에 URL을 입력 🌐 => 브라우저는 입력된 URL을 파싱해서 프로토콜(http, https), 도메인 경로등을 추출

2. 도메인 이름을 IP주소로 변환하기 위해 DNS서버에 요청 보내면서 브라우저는 반환된 IP주소로 TCP/IP 연결 시도함
(DNS조회와 TCP/IP연결을 동시에 병렬적으로, 비동기적으로 수행됨),
브라우저는 DNS 조회와 동시에 반환된 IP 주소를 사용하여 TCP/IP 연결을 시도하고, 동시에 HTTP request message를 생성하여 TCP 전송 계층에 전달함.
(일반적으로 HTTP는 80번 포트 사용/ HTTPS는 443번 포트 사용)

3. HTTP request message에 headers를 추가해서 패킷을 생성함

4. 패킷은 랜선을 통해 네트워크로 전송되고 요청된 IP웹서버에 여러가지 헤더와 함께 도착함 

5. server에 도착한 패킷은 unpacking을 통해 요청 message를 복원하고 server의 process로 보냄 

6. server의 process는 HTTP request message에 대한 응답 데이터를 가지고 HTTP response message를 생성함
 => 응답은 상태코드 (200 ok, 404 notFound... etc)와 함께 전송됨 

7. HTTP response message를 전달 받은 방식 그대로 client IP로 전송함

8. HTTP response message안에 담긴 데이터를 가지고 브라우저는 받은 HTML문서를 파싱하면서 DOM(document object model)을 생성함 + HTML파싱하면서 비동기적으로 외부 css파일이나 내부 스타일 태그를 만나면 이를 파싱해서 스타일규칙을 생성
(위 과정중 발생하는 네트워크 요청은 비동기적으로 수행됨)

9. DOM(Document Object model)과 CSSOM(css object model)이 병렬적으로 생성되고, 두가지의 각각 노드들이 스타일 규칙에 따라 결합되어 Render Tree를 구축함

10. Render Tree(= DOM + CSSOM)를 기반으로 각 요소의 위치 크기를 계산해서 레이아웃(=요소들을 배치 계산해보는 것) 수행

11. 레이아웃이 완료되면 화면에 표시할 내용을 그리기 위해 페인트(=진짜 UI생성) 작업 수행됨

12. 레이아웃, 페인트작업 완료되면 브라우저는 화면에 웹 페이지를 표시함 

 

  위와 같이 생성된 화면에서 변경사항이 발생하면 어떻게 될까?  

  JavaScript가 DOM에 직접 접근하여 수정  
  => 이를 토대로 새로 Render Tree 가 생성되고 Layout을 다시 계산 후 Painting함    

Layout과 Painting과정은 cost가 많이 드는 일

=> 자주 Layout, Paint를 하게되면 성능 문제로 나타남
ex) 100개의 업데이트 발생 -> 100번 DOM을 수정 + layout + paint -> 화면 계속 업데이트 겪어서 렌더링 100번 발생
-> 랙나고 느려짐 -> 한국인에게 극도의 불안을 안겨줌

  그래서 DOM에 직접 접근하여 업데이트하는 것을 최대한 적게 하는 것이 웹의 성능상 좋음  

  업데이트를 최소화 할 수있도록 모아서 한번에 업데이트 하는 것을 추상화 해둔 것이 React.js  

  그럼 React.js는 어떻게 렌더링 할까?   

1) 컴포넌트들을 호출하면 상위 컴포넌트부터 하위까지 객체 형태로 조합되어 Virtual DOM을 생성함

2) Virtual DOM을 실제 DOM에 반영하여 Render Tree생성하고, Layout, Paint과정을 거쳐 화면 나타냄

그리고 위 과정 후 발생한 업데이트에 대해서는 
변경사항이 반영된 Virtual DOM과 변경사항이 발생하기전 Virtual DOM을 비교하는 Diff과정 후,
업데이트된 내용에 대해서 한 방에 실제 DOM에 반영시킴 (여러번 반영하면 성능 안 좋아짐)
=> 위와 같이 비교를 통해 실제 돔을 업데이트 하는 과정을 Reconciliation이라고 칭함

 

참고:

https://ko.legacy.reactjs.org/docs/reconciliation.html

https://web.dev/articles/rendering-on-the-web?hl=ko

https://product.kyobobook.co.kr/detail/S000201352991

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction