React의 Virtual DOM

페이스북이 리액트를 만들기 전에도 앵귤러 백본 엠버 등 수 많은 프레임워크들이 존재했고 해당 프레임워크들은 데이터파트를 담당하는 model, 화면을 보여주게 되는 view, 사용자가 발생시키는 이벤트를 관리하는 controller로 이루어진 MVC 패턴, 그리고 거기서 부터 파생된 MVVM, MVW 등이 패턴들로 이루어져 있다.

(MVC, MVVM, MVW 등을 사용하던 기존 웹 프레임워크 / 라이브러리)

 

여기서 공통점은 바로 Model이다. 방금 언급했던 프레임워크들의 모델은 양방향 바인딩이라는 것을 통해서 모델의 있는 값이 변하는 뷰에서도 값을 변화시켜주고 뷰에서 어떤 값을 변화시키려고 하면 모델의 있는 값을 변화시켜주고 이러한 것을 양방향 바인딩이라고 부른다. 변화라는 키워드는(Mutation) 상당히 복잡한 작업이다.

 

예를 들어서 특정 이벤트가 발생했을 때 모델의 변화를 일으키고 그 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 view를 업데이트 해줄지 로직을 정해줘야 하는데 물론 그러한 로직은 사용자가 직접 정하기 보다는 어떠한 프레임워크나 라이브러리에서 로직을 정해줘야 한다.

 

페이스북에서는 리액트를 만들기 전에 이러한 발상을 하였다. 변화가 일어날일이 있다면 mutation을 하지말자. 대신에 데이터가 바뀌면 기존에 있던 View를 날리고 새로 만들면 어떨까?라고 발상을 하여서 리액트 개발이 시작되었다.

브라우저는 DOM기반으로 작동하기 때문에 페이지가 그때마다 새로운 View를 만들려고 하면은 성능적으로 큰 문제가 있을 것이다. 그래서 존재하는게 Virtual DOM인데 가상의 돔이다. 변화가 일어나면 실제의 DOM에 새로운 것을 넣는것이 아니라 JS로 이루어진 가상의 DOM에 한번 렌더링을 하고 기존의 DOM과 비교를 한 다음에 변화가 필요한 곳에만 업데이트를 해주는 것이다.

 

VirtualDOM을 사용함으로써 데이터가 바뀌었을 때 어떻게 바뀌었는지를 고려하는게 아니라 일단 바뀐 데이터로 그려놓고 비교를 한 다음에 바뀐부분만 찾아서 바꿔주는 것이다.

모델이 있다. 모델 가지고 실제 DOM을 그린다. 만약 모델에서 어떠한 변화가 발생했다 그러면 이걸 가상의 DOM에 그린다. 그리고 Real DOM이랑 In-memory DOM이랑 비교를 한다. 비교를 해서 변화가 어떤게 바꼈는지 알아내면 특정부분에다가 Fetch를 하는 것이다. 이것이 Virtual DOM이다

리액트의 가상 DOM을 이야기 할 때는 이 영상을 한번 참고하자.(React and Vitual DOM)

참고: https://www.youtube.com/watch?v=wKwMRH0PkMg 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

 

참고: https://www.youtube.com/watch?v=XxVg_s8xAms