기존 렌더링 방식
DOM이란
DOM이란 Document Object Model의 약자로 HTML 문서의 Object Model입니다. HTML의 구조화 된 표현으로 트리구조로 되어 있습니다.
웹브라우저는 HTML을 파싱하여 DOM 트리를 만들어서 관리하고 사용자에게 페이지를 보여주게 됩니다. 이 과정에서 업데이트 내용이 있을 때마다 DOM을 전체화면이 리렌더링이 되었습니다.
웹사이트의 변화에 있을 때마다 DOM 조작이 빈번하게 일어나고 전체가 리렌더링 되면서 비효율이 발생하게 됩니다.
Virtual DOM
그래서 React에서 도입된 개념이 Virtual DOM입니다.
Virtual DOM이란 가상돔으로 말 그대로 실제 DOM을 본 뜬 복사본입니다.
리액트 렌더링 방식
기존에는 DOM 조작이 일어나면 전체가 리렌더링이 되는데,
리액트에서는 Virtual DOM에서 기존 DOM과 얕은 비교를 하여 변화를 감지합니다.(Diffing)
그래서 감지된 결과를 모아서 그를 바탕으로 실제 DOM을 업데이트 시켜 매번 전체가 리렌더링 되는 비효율을 막을 수 있습니다.
이를 Reconciliation(재조정)이라고 합니다.
이외의 리액트 장점은?
-
JSX의 도입
JSX는 HTML 코드 안에 자바스크립트 코드를 쉽게 넣을 수 있는 방식입니다. Vue와 Angular는 HTML을 따로 작성해야하고 작성법을 익혀야 합니다. 이에 반해 직관적이고 이해하기 쉽습니다. -
Component의 재사용성
가장 작은 단위의 기능과 페이지를 뜻하는 컴포넌트를 손쉽게 확장할 수 있고 최적화에 유리합니다. -
거대한 커뮤니티
SPA의 1위인 만큼 다양한 자료들과 커뮤니티가 있습니다.
참고
https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb
https://modulabs.co.kr/blog/react-library/
