참고 영상: React and the Virtual DOM
이 영상이 흥미로웠던 이유는 첫 구절 때문이었다. 예로부터 Once upon a time~ 으로 시작해서 재미없었던 얘기는 없었으니까(?)
옛날 옛적에 브라우저의 전체 화면을 그려내는 View라는 화가가 살았답니다. 그는 전체 화면을 실제 DOM이라는 도화지에 그려내는 일을 했어요. 그는 이 일을 좋아했고 화면에 변경 사항이 적었던 시절에는 혼자서도 이 일을 그럭저럭 잘 해냈답니다.
하지만 시간이 지날수록 화면에 변경 사항이 발생하는 빈도가 점점 높아졌어요. 일일이 DOM node를 추적해서 변경된 부분을 계산하고 이를 반영한 화면 그리기가 그는 점차 burger🍔😫워졌어요. 그래서 변경 사항을 계산하는 일은 다른 사람에게 맡기려고 '리액트'라는 새로운 로봇 친구를 고용했답니다!
View는 예전에는 실제 DOM 도화지만 갖고 있었어요. 그래서 화면을 다시 그려낼 때도 하나의 도화지만 갖고 모든 작업을 해야 했답니다. 하지만 이제는 가상 DOM이라는 새로운 도화지도 사서 리액트에게 넘기고 받을 수도 있는 새로운 도구를 마련했어요. 가상 DOM 도화지는 실제 DOM 도화지와 달리 화면을 빠르게 휘리릭 그려낼 수 있는 장점이 있었답니다.
이제 화면에 변경 사항이 생기면 View는 화면의 변경 사항을 추적하지 않았어요. 대신, DOM node를 추적하고 변경 사항을 비교하는 일을 리액트에게 맡겼답니다.
리액트는 화면에 변경 사항이 정말로 발생했는지, 만약 발생했다면 어디인지를 파악해서 빠르게 새로운 가상 DOM 도화지를 만든 후에 View에게 넘겨주는 일을 했어요. View는 리액트가 알려준 대로 새로운 도화지를 실제 DOM도화지에 옮겨 그리기만 하면 되게 되었답니다!
이제 전체 과정을 자세히 살펴볼까요?
- 처음에 View는 텅텅 비어있는
실제 DOM도화지만 가지고 있어요. 여기에 아무 변경사항을 거치지 않은 첫 번째 화면(= 초기 화면)을 그려내게 되어요. - 시간이 지난 후에 화면에 변경 사항이 발생했네요!
- View는 변경 사항을 캐치하면 따로 계산하지 않은 이 화면을 그대로
가상 DOM에 빠르게 그려낸 뒤에 리액트에게 넘기게 돼요. - 리액트는 변경 사항이 실제로 생겼는지 여부와(View는 컴포넌트가 마운트되면 무조건 다시 그려내기 때문이에요!) 변경 사항이 없다면 'No difference' 알림과 함께 View에게 도화지를 전달하고 변경 사항이 생겼다면 다음과 같은 과정을 거치게 됩니다.
- DOM node 전체를 일일이 추적
Reconciliation(조정)을 통해 기존의 DOM과 달라진 점을 파악
달라진 점을 반영한 최종 가상 DOM을 View에게 전달
- DOM node 전체를 일일이 추적
- 자, 이제 View는 리액트에게서 전달받은 새로운 가상 DOM 도화지를 실제 DOM에 그대로 그려내기만 하면 돼요. 전체를 그려내긴 하지만 이번에는 변경 사항을 계산하는 일 없이 실제로 변경된 부분을 다시 그려내는 일만 하기 때문에 예전보다 훨씬 빠른 그리기 속도를 자랑한답니다.
이렇게 둘이서 모두 행복한 '그리기 + 계산하기' 분업이 완성되었다.
그리고 좋아하는 일인 화면 그리기에만 몰두할 수 있게 된 View는 계산하기를 좋아하는 리액트와 함께 happily ever after하게 살았다는 후문
영상 내용이 아주 정확한 건 아니고, 첫번째 댓글(@chetanraina5649)을 함께 참조해야 하는 듯 하다. (위의 내용은 댓글 내용까지 참조 후 작성했다)
리액트가 등장한 배경과 가상 DOM의 역할을 한 번에 설명해준 영상이었다.
