브라우저 동작 원리를 공부하면서 전체적인 브라우저의 과정을 함께 살펴보겠습니다.
추가적으로 가상 DOM과 가상 DOM에서 불변성이 중요한 이유도 정리하겠습니다.

브라우저의 URL 처리

url에 google.com을 치면 어떤 일이 발생할까요?

방문 기록 확인

방문했던 사이트를 기록해두면, 다시 방문할 때 전보다 효율적인 처리를 할 수 있도록 합니다.

과정

1. 브라우저는 해당 사이트를 방문한 기록이 있는지 브라우저 캐시를 확인합니다.
2. 없으면 hosts파일을 확인합니다.
3. 없으면 DNS를 호출합니다.

위 절차를 통해 접속하려는 url의 ip주소를 획득합니다.

배민 라이더를 통해 이해하는 url 검색

배민 라이더 알바를 하면서 배달한 집에 또 배달할 경우를 대비해, 가는 길을 노트에 적는다고 하겠습니다.
오늘 10개의 배달을 다녀왔고, 11번째 배달을 시작합니다.

11번째 배달 목적지가 방금 갔다온 집이라면, 머리속에 길을 알고 있으니 굳이 노트를 볼 필요가 없습니다. 바로 배달을 갑니다.
=> 머리 속의 길 = 브라우저 캐시

12번째 배달 목적지는 머리속에 기억이 없습니다. 노트를 확인해 방문한 적이 있는지 확인합니다.
배달을 간 적이 있다면, 노트에 가는 길이 적혀있게 됩니다. 노트에 있는 길을 참고해 배달을 갑니다.
=> 노트의 길 = hosts 파일

13번째 배달 목적지는 머리속에도, 노트에도 없습니다. 가는 길을 인터넷에 검색해야겠습니다.
=> 인터넷에 검색해서 알아낸 길 = DNS 호출을 통해 알아내기

과정(2)

1. 위의 과정을 거쳐서 ip를 획득합니다.

2. ip가 존재하는 대역으로 이동합니다.

3. ARP 프로토콜을 통해 ip주소를 mac주소 (물리적 주소)로 변환합니다.

4. tcp 통신을 위한 3-way handshake 연결을 합니다.
   클라이언트가 통신하자고 요청을 보내고, 서버가 요청하겠다는 응답을 보내고, 다시 클라이언트가 서버의 응답요청수락을 받았다는 응답을 보냅니다.
   이 과정은 ack 플래그에 syn 플래그 + 1을 보내게 됩니다.

5. 서버가 클라이언트 요청에 대한 응답을 반환합니다
   일반적으로 html파일입니다.

6. 응답받은 html을 브라우저가 해석하고 화면에 그려주어 사용자가 볼 수 있도록 합니다.

브라우저에 URL을 검색하면 위와 같은 일이 발생합니다.
응답받은 html을 해석하고 화면에 보여주는 렌더링 과정을 자세히 살펴보겠습니다.

브라우저의 동작 원리 (렌더링)

동작 원리

렌더링

브라우저는 html을 해석해서 DOM tree를 생성하고, css를 해석해서 CSSOM tree를 생성합니다.
그리고 두 tree를 합쳐서 문서의 시각적 구조를 나타내는 render tree를 생성합니다.

레이아웃

viewport 내에서 생성된 render tree의 구성 요소들이 어느 공간에, 어느 정도만큼 위치할지 계산합니다.
position, size 등이 이때 계산됩니다.

페인트

Layout 계산대로 render tree를 사용자에게 보여줍니다.

합성

페이지의 각 부분을 레이어로 분리하고, 별도로 합성합니다.

주의할 점

1. 위 동작 원리는 순서대로 진행이 됩니다.

어떤 action에 의해서 DOM에 변화가 생기면 render tree가 재생성되어 (렌더링이 다시 되어) 레이아웃, 페인트, 합성의 과정이 모두 발생합니다.

화면 크기 변경의 경우 레이아웃부터 발생하고, 색상 변경은 페인트부터 발생합니다.
어떤 과정부터 발생하는지에 따라 효율이 다를 수 있음을 뜻합니다.

예시로 우테코 유튜브 - [10분 테코톡] ☕️ 체프의 브라우저 렌더링의 내용에 left를 이동하는 animation보다 transform을 사용하면 합성만 발생하기 때문에 더 효율적이라고 합니다.

2. 순서대로 진행은 되지만, 그걸 기다리지는 않습니다.

브라우저는 사용자에게 빨리 화면을 보여주기 위해서 html 파싱을 기다리지 않고 배치와 그리기를 먼저 시작합니다.

네트워크로부터 나머지 내용을 기다리면서 동시에 내용의 일부를 먼저 화면에 표시합니다.

가상 DOM

배경

SPA의 사용이 늘어나면서 DOM tree를 많이 변경하게 됩니다.
즉, 페이지를 서버가 보내주는게 아니라 js가 관리하게 됩니다.

이에 따라 효율적으로 DOM을 관리해야 했고, 가상 DOM이 탄생하게 됩니다.

가상 DOM

React에서는 데이터 변경 시 바뀐 내용이 가상 DOM에 렌더링됩니다.
그리고 이전의 가상 DOM과 비교해서 바뀐 부분만을 찾아 실제 DOM에 반영합니다.

가상 DOM은 js 객체로 표현되어 메모리상에서 동작하고, 실제로는 렌더링 되지 않기 때문에
연산이 적고 빠릅니다.

Reat 가상 DOM에서 불변성이 중요한 이유

불변성은 값이 직접 바뀌지 않고, 새로운 값을 만든다는 뜻입니다.

React의 가상 DOM에서 불변성은 굉장히 중요한 사항입니다.
가상 DOM에서 바뀐 부분을 찾을 때 값을 비교하기 때문입니다.

객체는 참조 타입으로 값으로 주소값이 저장됩니다.
어떤 객체를 수정할 때 불변성을 지켜 새로운 참조값을 가지는 객체로 생성해야 가상DOM에서 변화를 찾을 수 있습니다.

정리

브라우저의 URL 처리 과정, 동작 원리를 공부했습니다.

관련 개념을 찾아보다가 가상DOM에 대해서도 공부하여
가상 DOM이 무엇인지, 왜 쓰는지 알게 되었습니다.

의문점으로는 react 불변성 관련 글에서 immer.js를 많이 얘기하시는데 이걸 왜쓰는지 잘 모르겠습니다.
setState(beforeState => ({...beforeState, number: 1})
같은 형식으로 사용해도 참조값이 달라지니까 update가 잘되는것같은데...
나중에 react를 다시 볼때 추가 공부해야겠습니다.

const [arr, setArr] = useState([]);

arr.push(newData) // 변화 X

setArr(beforeArr => [...beforeArr, newData]); // 변화 O

push는 arr이 참조하는 주소값이 그대로여서 update가 되지 않습니다.
setArr...과 같은 형태는 새로운 객체를 생성하기 때문에 주소값이 바뀌어서 update됩니다.

여러 블로그 글에서 리액트에서 immer.js는 필수라는 듯이 말을 하는데
대체 왜 써야 하는지 궁금했습니다.
setArr...과 같은 방법을 써도 잘만 update가 되니까요.

'리액트에서는 redux와 여러 라이브러리를 사용해서 상태를 관리하는 방법이 자주 사용되었는데,
협업시에 휴먼에러 + 많은 라이브러리가 불변성에 영향을 줄 수 있으니
immer.js를 사용함으로써 암묵적으로 불변성은 더 이상 신경쓰지 않아도 되도록 하는 장점이 있다'
는 데브코스 멘토님의 답변 덕분에 내용을 수정합니다.
감사합니다.

참고

네이버 D2 - 브라우저는 어떻게 동작하는가
우테코 유튜브 - [10분 테코톡] ☕️ 체프의 브라우저 렌더링
우테코 유튜브 - [10분 테코톡] 🥁 지그의 Virtual DOM
poiemaweb 브라우저 동작 원리
최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작

수정

2022.03.31. immer.js를 쓰는 이유 추가