React의 Virtual DOM은 어디에 저장될까?

 

원문: https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f

 

글을 읽다가 너무 좋은 글이 있어 번역 및 정리를 해보려고 한다.

 

React를 공부하다 보면 Virtual DOM에 대한 얘기를 지겹도록 듣는다.
jquery가 중심인 프론트엔드 판에서 React가 파이를 가져갈 수 있었던 건 Virtual DOM 덕분이다.
그렇기 때문에 React를 공부하거나 사용할 때 기술에 대한 언급을 자주 듣는 건 어찌 보면 당연하다.

 

Why Virtual DOM?

기존에는 직접 DOM에 접근했기 때문에 수정할 때마다 리렌더링 되었다.

하지만 Virtual DOM을 사용해 수정사항을 모아서 최소한의 리렌더링으로 프론트엔드를 업데이트해줄 수 있었다.
최근에 나오는 프론트엔드는 상호작용이 점점 많아지는데 이런 환경에서 React는 더욱 강력하다.

 

Structure

Virtual DOM의 구조는 실제 DOM과 매우 흡사하지만 더 가볍고 빠르게 작업할 수 있도록 만들어졌다.

 

Virtual DOM에 있는 각 Component들은 아래 정보들을 담는다.

 

- tag

- attributes (class, id, ...)

- 자식 components

 

이 트리 구조는 업데이트를 효율적으로 할 수 있도록 만들어진 구조로 이전의 Virtual DOM과 비교 및 확인할 때 쉽게 탐색 및 비교를 할 수 있도록 도움을 준다.

 

Update (Re-rendering)

state가 변경될 때 React에서는 실제 DOM을 건드리지 않고 직전의 Virtual DOM 기반의 업데이트를 진행하게 된다.

아래 내용은 아주 중요한 내용이지만 

 

1. state 변경을 감지 (useState의 setter 함수를 사용, ...)

2. 새 Virtual DOM 트리를 만들어 state가 변경되어 업데이트된 내용을 반영한다.

3. 이전 Virtual DOM 트리와 비교 (diffing algorithm)

4. 비교를 통해 차이점을 식별하고 이를 실제 DOM에 반영한다. (Reconciliation)

 

Virtual DOM은 어디에 저장될까?

(이 문장은 글의 제목으로 이 질문이 Virtual DOM의 설명을 관통하기 때문에 아마 원문의 저자도 이 제목을 선택한 것 같다.)

 

Virtual DOM은 전적으로 메모리에 저장되는데, 이는 JavaScript 객체로 눈에 보이는 부분에 저장되지 않은 내부 데이터 구조이다.

 

이 구조는 단지 JavaScript 객체이기 때문에 위 업데이트 과정으로 최소한의 변경을 찾고 이 변경을 기반으로 업데이트할 때까지 실제 DOM을 건드리지 않는다.

 

그렇기 때문에 실제 DOM과 분리된 Virtual DOM의은 React 성능 최적화를 도와주는 것이다.

 

마무리 (+ 하고 싶은 말)

글 중간 중간 핵심 내용에서 벗어나는 다소 필요 없는 문단들이 있어 전부 번역하지는 않고,

나도 공감하는 부분만 번역하고 정리하였다.

 

내가 하고 싶었던 말은 사실 제목에 전부 포함되어 있는데,

Virtual DOM != 실제 DOM이란 걸 말하고 싶었다.

 

Virtual DOM은 실제 DOM과 분리되어 있는 별도의 객체로,

이 객체를 활용해 실제 DOM을 건드리지 않고 차이점을 식별해 이를 한 번에 반영을 한다.

하지만 그만큼 메모리를 차지하기 때문에 트레이드오프가 있다는 걸 이해하고 리액트를 사용하는 게 중요하다고 생각한다.