📖 Virtual Dom이란?
- React의 주요 특징 중 하나는 Virtual Dom을 사용한다는 점입니다.
Virtual Dom을 한글로 해석하면 "가상의 돔"을 나타냅니다. 그리고 Virtual Dom을 알아보기 위해서는 Dom이 무엇인지 알아야하죠.
📖 그래서 Dom이 뭐야?
- Dom은 Document Object Model의 약자입니다. 해석하자면 문서 객체 모델을 의미하죠.
- 여기서 문서 객체는 HTML, XML, XHTML 문서들을 나타내는 것이고, 해당 문서 안에서 div, input, a 태그와 같은 것들이 전부 DOM에 해당합니다.
- 즉 자바스크립트에서는 DOM이 존재하기 때문에 HTML 각종 태그들을 수정할 수 있습니다.
- 그리고 위의 말은 "웹브라우저에서 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다"와 동일한 말입니다.
📖 DOM의 형태
- DOM은 트리 형태로 구성됩니다. (나무를 물구나무 세운다고 생각해보죠)
- 트리 형태의 DOM은 특정 노트를 찾거나, 수정하거나, 제거하거나, 원하는 곳에 삽입할 수 있습니다.
📖 DOM의 한 가지 문제점
- DOM에는 한 가지 문제점이 존재합니다. 바로 동적 UI에 최적화되어 있지 않다는 점입니다. HTML은 자체적으로는 정적입니다. 자바스크립트를 사용하여 이를 동적으로 만들 수 있어요.
📖 개념 알아보기 : 정적 VS 동적
📌 정적이란 (static)?
- 정적은 프로그램이 실행될 경우 런타임에 변하지 않는 것을 의미해요. 예시로 변수가 정적으로 선언되면, 프로그램이 실행될 경우 메모리에 값이 한 번 할당되고, 값이 변경되지 않습니다.
📌 동적이란 (dynamic)?
-
동적인 것은 런타임 동안에 변화하는 것을 의미합니다. 예시로 변수가 동적일 경우, 프로그램 실행 중에 값이나 속성이 변경될 수 있어요.
-
동적인 것에 예시는 Python의 리스트를 예시로 들 수 있습니다. 리스트에 요소를 추가, 삭제가 가능하고, 요소가 변경될 수 있죠
-
축약하자면, 정적이라는 것은 고정적이고, 동적인 것은 변화 가능합니다.
📖 그래서 그게 뭐가 문제인데??
-
예시를 들어보겠습니다. 페이스북을 생각해보세요. 스크롤바를 내릴수록 수 많은 데이터가 로딩됩니다. 그리고 각 데이터를 표현하는 요소들이 있습니다. 요소 개수가 1000개, 10000개와 같이 많다면 얘기가 달라집니다.
-
규모가 큰 어플리케이션에서 DOM이 직접 접근하여 변화를 주다 보면 성능 이슈가 발생하기 시작합니다. 한마디로 느려진다는 말이죠.
📖 해결법 : Virtual Dom
- 이를 해결하기 위해서 "Dom을 최소한으로 조작하여 작업을 처리하는 방식"이 효율적입니다. 여기서 나온 것인 가상의 DOM인 것이죠
- Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 마치 실제 DOM의 가벼운 사본과 비슷합니다.
📖 Virtual DOM의 3가지 절차
- React에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 경우 다음 절차를 밟습니다.
- 데이터를 업데이트 할 경우 전체 UI를 가상의 돔에 리렌더링합니다
- 이전 가상의 돔의 내용과 현재 내용을 비교합니다
- 바뀐 부분만 실제 돔에 적용합니다.
📖 Virtual DOM의 장점
- 이럼 가상 돔의 장점이 무엇일까요? 가상 돔의 장점은 다음과 같습니다.
- 렌더링 횟수를 줄여서 성능을 더욱 향상시켜줍니다.
- 빠른 업데이트를 가능하게 하고 어플리케이션 반응성을 높여줍니다
- 개발자가 플랫폼 간 호환성을 쉽게 유지할 수 있도록 도와줍니다
- 코드의 가독성을 높이고 유지보수 역시 좋아집니다
- 무엇보다 리액트가 가상의 돔을 지원하기에 우리는 가상의 돔에 대해 알아야합니다
- 참고자료 : 리액트를 다루는 기술
나 혼자 보려고 만든 개발 일기