Virtual DOM

Virtual DOM은 실제 DOM과 비슷한 구조를 가진 JavaScript 객체입니다. 리액트에서 UI를 업데이트할 때, 실제 DOM을 직접 조작하는 대신 Virtual DOM을 사용하여 변경 사항을 효율적으로 처리하고 성능을 향상시키는 데 사용됩니다.

Virtual DOM의 작동 방식

1. 최초 렌더링:

   웹 페이지가 처음 로드될 때, 리액트는 Virtual DOM 트리를 생성합니다. 이 트리는 실제 DOM의 구조와 동일한 정보를 담고 있습니다.

2. 변경 감지:

   데이터가 변경되면, 리액트는 변경된 데이터를 기반으로 새로운 Virtual DOM 트리를 생성합니다.

3. 차이점 비교 (Diffing):

   리액트는 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교하여 변경된 부분(노드)을 찾아냅니다. 이 과정을 Diffing이라고 합니다.

4. 일괄 업데이트 (Patching):

   리액트는 Diffing 결과를 바탕으로 실제 DOM에서 변경된 부분만 선택적으로 업데이트합니다. 이 과정을 Patching이라고 합니다.

5. 렌더링:

   변경된 부분이 실제 DOM에 반영되면, 브라우저는 업데이트된 내용을 화면에 표시합니다.

Virtual DOM을 사용하는 이유

• 성능 향상: 실제 DOM 조작은 비용이 많이 드는 작업입니다. Virtual DOM을 사용하면 변경된 부분만 실제 DOM에 반영하므로 렌더링 횟수를 줄여 성능을 향상시킬 수 있습니다.
• 효율적인 업데이트: Diffing 과정을 통해 변경된 부분만 찾아내므로 불필요한 DOM 업데이트를 줄여 효율적인 업데이트가 가능합니다.
• 간단한 코드 작성: 개발자는 실제 DOM 조작에 대해 걱정하지 않고 데이터 변경에만 집중할 수 있어 코드 작성이 용이합니다.

Virtual DOM 관련 용어

• Diffing: 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교하여 변경된 부분을 찾아내는 과정
• Patching: Diffing 결과를 바탕으로 실제 DOM에서 변경된 부분만 선택적으로 업데이트하는 과정