자바스크립트를 공부하면서 DOM에 대해서 알아봤었다. DOM 내용은 여기에
그런데 리액트에는 virtual DOM, 가상돔이라는 녀석이 존재한다고 한다...🥲 이름부터 낯선 가상돔에 대해서 알아보자
리액트란?
리액트란 사용자 인터페이스(UI)를 만들기 위한 javascript 라이브러리이다.
리액트는 선언적 방식이며, 컴포넌트를 기반으로 하고 있다.
절차적 방식과 선언적 방식
개발 방식은 크게 절차적인 개발과 선언적인 개발로 나뉜다. 그리고 리액트는 선언적 개발 방식을 사용하고 있다.
절차적(명령형) 방식
- 원하는 결과를 만들기 위해서 어떻게(how) 해야하는 지에 중점을 두는 방식이다.
- 자바스크립트로 직접 DOM을 조작한다.
- 단점으로는 이 과정이 다소 복잡하며 생산성이 저하될 수 있다는 점이 있다.
- 예를 들어 바닐라자바스크립트로 작업할 때
getElementId로 요소들을 하나하나 가져와서class를 부여하고appendChild하고addEventListener주는 것을 떠올리면 될 것 같다.
- 예를 들어 바닐라자바스크립트로 작업할 때
선언적 방식
- 원하는 결과가 무엇인지(what) 에 중점을 두는 방식이다.
- 원하는 결과를 선언하고 DOM조작은 React에 위임을 한다.
- 선언적 방식으로 개발하게 된다면 개발 과정에서도 최종 결과물의 모습만 고려하면 되기 때문에 훨씬 편리하고 효율적으로 개발 할 수 있게 된다.
Virtual DOM
virtual DOM은 DOM 요소에 변화를 주기 전, DOM에 일어나야 하는 변화를 계산하는 역할을 한다.
ui를 업데이트하면 DOM요소에 변화를 주어야하는데, DOM 조작은 리액트가 한다고 했다. 그런데 현대 복잡하고 규모가 큰 웹 애플리케이션에서는 상호작용이 많은 만큼 DOM 조작이 많이 발생한다. 이때마다 수천 수백개의 요소를 새로 그려야 하기 때문에 성능이 저하되고 전체적인 프로세스가 비효율적이게 된다.
따라서, 이런 문제를 해결하기 위해서 리액트는 이전 UI상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행하는 것이다.
결론적으로,
Virtual DOM ?
- 리액트가 내부적으로 DOM을 조작하는 과정에서 브라우저에 발생하는 연산의 양을 줄이는 방식을 통해서 성능을 개선하기 위한 방법이다.
마무리✨
virtual DOM 이라는 이름에서부터 어려워 보여서 겁먹었는데 생각보다 개념이 그렇게 어렵지는 않았다.
요약하자면, 리액트가 선언적 방식으로 개발을 하면서 DOM조작을 리액트에 위임을 했는데 DOM조작이 많이 발생할 수 록 성능이 저하될 수 있기 때문에 이를 방지하기 위해서 DOM의 미니어처라고 할 수 있는 가상DOM이 개발 된 것이고 이를 이용해 브라우저에 발생하는 연산의 양을 줄이고 성능을 개선할 수 있게 된 것이다.
