리액트의 특징에 대해 알아보기 전에 DOM에 대해 알아보고자 한다.
DOM이란
DOM은 Document Object Model의 약어이며, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
웹 브라우저는 DOM을 할용하여 객체에 JS와 CSS를 적용한다.
또한 DOM은 트리 형태이기 때문에 특정 노드의 탐색, 수정, 제거, 삽입이 가능하다.
DOM의 문제점
DOM은 동적 UI에 최적화되어 있지 않다는 치명적인 문제점이 존재한다.
DOM은 정말 느릴까?
규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생한다. 즉, 느려진다.
하지만 DOM 자체는 빠르다.
DOM 자체를 읽고 쓸 때의 성능은 JS 객체를 처리할 때의 성능과 비교했을 때 다르지 않다.
그럼 어떤 과정에서 느려지는걸까?
웹 브라우저 단에서 DOM에 변화가 생기면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는데 이 과정에서 느려지는 것이다.
🔑 해결법
리페인트 횟수가 잦을수록 성능이 저하되므로 DOM을 최소한으로 조작해야 한다.
👉 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화하기 때문에 DOM 처리 횟수를 최소화하고 효율적으로 진행함
Virtual DOM
리액트의 주요 특징 중 하나는 Virtual DOM을 사용한다는 것이다.
Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하지 않고 이를 추상화한 JS 객체를 구성하여 사용한다. 즉, 실제 DOM의 사본이라고 생각하면 쉽다.
이전 포스트에서 조화 과정에 대해 알아보았다.
다시 복습하는 차원에서 그리고 더 구체적으로 리액트에서 데이터가 변해 웹 브라우저에 실제 DOM을 업데이트할 때의 절차를 알아보자
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
⚠️ Virtual DOM을 사용하면 사용하지 않을 때보다 무조건 빠르지 않다는 점을 유의하자
리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 업데이트 처리 간결성
그 외 특징
👉 리액트는 라이브러리이기 때문에 다른 웹 프레임워크가 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하고 있는 것과 달리 직접 구현하여 사용해야 한다.
현재 다른 개발자들이 만든 다양한 라이브러리가 존재하기 때문에 상황에 맞게 취향대로 라이브러리를 가져다 사용하면 된다.
이것은 취향대로 스택을 설정할 수 있다는 장점도 존재하지만 여러 라이브러리를 접해야 한다는 단점도 함께 존재한다.
👉 리액트는 다른 웹 프레임워크 / 라이브러리와 혼용할 수 있다.
