누구든지 하는 리액트 (by velopert) 강의와 블로그 글을 보고 정리한 글입니다.

Ⅰ. 소개

React의 과거의 메뉴얼에 이렇게 적혀있다.

We built React to solve one problem: building large applications with data that changes over time.

우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다

페이스북은 왜 리액트를 만들게 되었는가?

• 페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했다.
• 해당 프레임워크들은 MVC 패턴, MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이루어져 있다.

  MVC 패턴이란?

  데이터단을 담당하는 모델(Model), 사용자의 화면에서 보여지게 되는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러 (Controller) 로 이뤄짐

• 위의 프레임워크들의 공통점은 모델이다. 프레임워크들의 모델은 대부분 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜준다.

• ”변화(Mutation)”라는것은 상당히 복잡한 작업이다.
  특정 이벤트가 발생 -> 모델에 변화를 일으킴 -> 변화를 일으킴에 따라 어떤 DOM 을 가져옴 -> 어떠한 방식으로 뷰를 업데이트! 이런 로직을 정해줘야 함! (로직은 라이브러리 혹은 프레임워크에서 정해줌)
  
  

• 그래서 페이스북에서는 이러한 발상을 했다.

그냥 Mutation을 하지 말고 데이터가 바뀌면 그냥 View를 날려버리고 새로 만들어버리자! 

하지만.. 브라우저는 DOM 기반으로 작동하기 때문에 페이지를 그때 그때 새로 view를 만들어버리라 하면 성능적으로 엄청난 문제가 발생한다.

Ⅱ. Virtual DOM

위의 문제를 해결하기 위해 존재하는 것이 Virtual DOM이다.
Virtual DOM은 가상의 DOM으로 변화가 일어나면 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, Javascript로 이루어진 가상 DOM에 한번 렌더링 -> 기존의 DOM과 비교 -> 정말 변화가 필요한 곳에만 업데이트 를 한다.

• 일단 바뀐 데이터로 그려놓고 비교를 한다음 바뀐 부분만 찾아서 바꿔준다.
• Model이 있고 실제 DOM을 그리는데 Model에 변화가 생겨서 변화에 따라 가상의 DOM을 그린다. 실제 DOM과 가상의 DOM을 비교해서 어느 부분이 바뀌었는지 알아내면 그 부분을 fetch한다.