🗣️ 리액트에서 가상 DOM을 사용하는 이유에 대해 설명해주세요.
-
의도: 리액트의 기본 원리와 가상 DOM의 핵심을 이해하고 있는지 확인하는 질문
-
팁: 가능하면
useState와의 관계성도 설명하면 좋다. -
나의 답안
리액트는 가상 DOM(Virtual DOM)을 사용해 실제 DOM 조작의 비효율성을 줄이고, 렌더링 성능을 최적화합니다.
브라우저의 실제 DOM은 조작할 때마다 전체 트리를 다시 계산하고, 레이아웃과 리렌더링 과정을 수행해야 하기 때문에 연산 비용이 큽니다.
반면, 리액트는 메모리 상에 존재하는 가상 DOM을 두고, 상태나 데이터가 변경될 때마다 전체 UI를 가상 DOM 형태로 다시 렌더링합니다.
이후 리액트는 이전 가상 DOM과 새로운 가상 DOM을 비교하는 Diffing 알고리즘을 통해 변경된 부분만 찾아내고, 그 차이만 실제 DOM에 반영합니다.
이렇게 하면 DOM 전체를 매번 갱신하지 않고 필요한 부분만 최소한으로 업데이트할 수 있어, 브라우저 렌더링 비용이 크게 줄어듭니다. -
주어진 답안 (모범 답안)
실제 DOM은 html의 요소를 트리로서 가지고 있는 객체 기반의 모델이며, 브라우저는 실제 DOM을 기반으로 화면을 렌더링합니다.
반면에 가상 DOM은 실제 DOM을 경량화한 복사본으로, 리액트의 최적화를 위해 사용됩니다.실제 DOM을 직접 조작하는 것은 성능 비용이 큰 작업이기 때문에, 리액트는 상태가 업데이트될 때마다 우선 빠르고 가벼운 가상 DOM을 업데이트하고, 결과를 실제 DOM과 비교합니다.
이후 변경된 부분만 실제 DOM에 반영함으로써 불필요한 리소스 사용을 최소화하고 성능을 향상시킵니다.이 과정을 가장 쉽게 살펴볼 수 있는 리액트의 메서드는 바로
useState입니다.
이 상태 관리 훅을 통해 상태를 업데이트하면 상태 값이 곧바로 반영되지 않습니다.
왜냐하면 상태 업데이트는 그저 변수에 데이터를 담아내는 것이 아니라, 앞서 설명했던 가상 DOM과 실제 DOM의 비교 과정이 실행되기 때문입니다.
상태 값이 자기 자신을 참조하여 상태를 업데이트할 때 생기는 오류는 대부분 이 때문입니다.
이러한 문제를 해결하기 위해useState훅에 값이 아닌 콜백 함수의 참조를 인자로 전달할 수 있습니다.
📝 개념 정리
리액트에서 가상 DOM(Virtual DOM)을 사용하는 이유는 성능 최적화와 개발 생산성 향상이다.
이를 좀 더 자세히 이해하기 위해, 가상 DOM이 무엇인지, 왜 필요한지, 그리고 어떻게 작동하는지를 알아보자.
🌟 가상 DOM이란?
- 가상 DOM은 실제 DOM(Document Object Model)의 경량화된 복제본이다.
- 리액트는 애플리케이션의 UI를 표현하기 위해 가상 DOM을 메모리에 저장한다.
이 가상 DOM은 실제 DOM과 같은 구조를 가지고 있지만, 브라우저의 렌더링 엔진과 독립적으로 작동한다. - 주로 JavaScript 객체로 구현되며, UI 업데이트를 위한 효율적인 작업 공간으로 활용된다.
🌟 가상 DOM이 필요한 이유
- 실제 DOM의 느린 성능
- DOM 조작은 비용이 크다.
- DOM은 브라우저 엔진과 상호작용하며 UI를 업데이트하는데, 이는 매우 느린 작업이다.
- DOM 조작 시, 브라우저는 레이아웃 재계산(reflow)와 리페인트(repaint)를 수행하므로 성능이 저하될 수 있다.
- 특히, 대규모 UI에서 잦은 DOM 업데이트가 발생하면 성능 문제가 두드러진다.
- UI 업데이트 복잡성
- UI 상태가 복잡할수록, 특정 상태 변경에 따라 정확히 어떤 DOM 요소를 수정해야 하는지 계산하기 어려워진다.
- 수동으로 DOM 조작을 최적화하려면 많은 코드를 작성해야 하고, 이는 개발자 실수와 유지보수 어려움을 초래할 수 있다.
🌟 가상 DOM의 해결 방법
- 변경 사항 최소화
- 가상 DOM은 상태(state) 변화에 따라 새로운 가상 DOM 트리를 생성하고, 기존 가상 DOM과 비교(diffing)하여 변경 사항만 계산한다.
- 이를 통해 실제 DOM 업데이트를 최소화하고 성능을 최적화한다.
- 배치 업데이트(Batched Updates)
- 여러 상태 변경이 발생하더라도, 리액트는 이를 모아서 한 번에 가상 DOM에서 처리하고, 필요한 변경 사항만 실제 DOM에 반영한다.
🌟 가상 DOM의 작동 원리
- 1단계: 상태 변경 발생
- 컴포넌트의 상태(state) 또는 속성(props)이 변경되면 새로운 가상 DOM 트리가 생성된다.
- 2단계: Diffing 알고리즘
- 기존 가상 DOM과 새로운 가상 DOM을 비교(diffing)하여 변경된 부분을 탐지한다.
- 리액트는 효율적인 트리 비교를 위해 재귀 대신 계층적 탐색을 사용하며, 같은 노드 유형의 비교를 빠르게 처리한다.
- 3단계: 실제 DOM 업데이트
- 변경된 부분만 실제 DOM에 반영한다. 이 과정에서 불필요한 DOM 조작을 최소화하여 성능을 향상시킨다.
🌟 가상 DOM 사용의 이점
- 성능 최적화
- 변경된 부분만 실제 DOM에 반영하므로 렌더링 속도가 빨라진다.
- 특히, 복잡한 UI에서 효과적이다.
- 개발 생산성 향상
- 개발자는 DOM 조작을 직접 처리할 필요 없이 상태(state) 중심으로 UI를 설계할 수 있다.
- 코드가 간결하고 유지보수가 쉬워진다.
- 크로스 브라우저 호환성
- 가상 DOM은 브라우저의 DOM API와 독립적이므로, 다양한 브라우저에서 일관된 성능을 제공한다.
🌟 가상 DOM과 관련된 오해
- 가상 DOM 자체가 빠른 것은 아니다. 실제 DOM 업데이트를 최소화하는 방식(diffing과 효율적 렌더링)이 빠른 것이다.
- 작은 규모의 UI에서는 가상 DOM이 오히려 성능을 저하할 수 있지만, 대규모 애플리케이션에서 이점이 명확히 드러난다.
🌟 결론
리액트의 가상 DOM은 실제 DOM 조작의 복잡성과 비용을 줄이고, 효율적인 UI 업데이트를 가능하게 하여 사용자 경험과 개발 경험을 동시에 향상시키는 핵심 기술이다.
특히, 상태 기반의 선언적 UI와 결합되어, 현대적인 프론트엔드 개발의 주요 패러다임을 가능하게 한다.
