[React] React Virtual DOM

자바스크립트 라이브러리,프레임워크 3대장 (Vue.js / Angular.js / React)중 React를 공부하며 정리하겠습니다.

 

React

리액트는 facebook에서 제공하는 라이브러리로 "지속적으로 데이터가 변하는 대규모 애플리케이션을 구축하기 위해서 리액트를 만듦!" 이라고 제시하네요 :>

 

이 리액트는 Component라는 개념에 집중된 라이브러리입니다. 웹에서는 MVC/MVVM/MVW 등의 패턴을 사용했습니다. 공통점은 Model <-> View 사이에 어떤 변화가 있으면 다른 쪽에서도 변화를 시켜주는 양방향 바인딩이었습니다.

(Component : 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여줍니다.)

 

변화! facebook에서는 변화가 일어날 필요가 있다면 변화를 하지말고 View를 그냥 쌩으로 날리고 새로 만들어 버리자!

라는 생각으로 React를 만들게 되었습니다. 그런데 DOM에서 그때그때 렌더링해서 새로 DOM을 만들기엔 브라우저의 부담이 너무 컸습니다 ㅜㅜ

 

그래서 생각한 게 Virtual DOM! 

Virtual DOM 원리

[출처] https://cythilya.github.io/2017/03/31/virtual-dom/

 

What is Virtual DOM?!?

• 가상의 DOM을 만들고 관리한 것. 
• 무엇이든 될 수 있다! (JSON, XML, Text, etc, ...)

실제 DOM에 변화가 일면 바로 브라우저 DOM에 새로운 View를 때려 넣는 게 아니라! 자바스크립트로 이루어진 React의 가상 DOM에 의해 한 번 rendering을 거치고 실제 기존의 DOM과 비교 후 정말 변화가 필요한 곳만 업데이트 해줍니다.

 

데이터 변화가 있으면 Virtual DOM이 일단 먼저 그리고 React가 실제 DOM과 비교 후 바뀐 부분만 찾아 바꾸는 것입니다.  (이런 변화 횟수도 너무 많아지면 성능에 안좋기 떄문에 최적화를 위해 변화의 수를 최소하 하는 이슈를 생각해보는 게 좋습니다.)

 

 

참고

누구든지 하는 리액트 : 초심자를 위한 react핵심 강좌  (inflearn)

https://www.slideshare.net/gyeongseokseo/virtual-dom (Virtual DOM)