React

We built React to solve one problem: building large applications with data that changes over time. 우리는 지속해서 데이터가 변화하는 대규모 어플리케이션을 구축하기 위해 React를 만들었습니다.

1. 프론트엔드 라이브러리 / 프레임 워크

커다란 규모의 프로젝트에서, 다양한 유저 인터페이스와 인터렉션을 나타내기 위해서는 수많은 DOM 요소와 상태값을 관리해줘야합니다. 이런 DOM과 상태값 업데이트 관리를 최소화하고, 오직 기능 개발과 사용자 인터페이스 구현에 집중 할 수 있도록 하기위해 여러 라이브러리들 혹은 프레임 워크들이 만들어졌습니다.

Angular

  • 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다.
  • Angular1은 오랫동안 사용돼어 유지보수하고 있는 프로젝트가 많습니다.
  • Angular2는 매우 성숙하긴 하지만, 인지도 측면에서 아직 성장하는 단계입니다. 주로 타입스크립트랑 함께 사용됩니다.

React

  • 컴포넌트라는 개념에 집중 되어있는 라이브러리입니다. 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다.
  • HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않습니다.
  • 공식 라이브러리가 존재하지 않아 개발자가 원하는 스택을 마음대로 골라(만들어) 사용할 수 있습니다.

Vue

  • 대부분 Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 앵귤러나 리엑트와 달리, 단순히 CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와 사용하기 쉽고 편리합니다.
  • HTML을 템플릿처럼 그대로 사용할 수도 있어, 마크업을 만들어주는 디자이너/퍼블리셔가 잇는 경우 작업 흐름이 매우 매끄럽습니다.
  • 공식 라우터, 상태 과리 라이브러리가 존재합니다.

2. React 특징

리엑트가 만들어지기 전의 프레임워크들은 데이터를 담당하는 모델(Model), 사용자의 화면에 보여지는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 커트롤러(Controller)로 이뤄진 MVC 패턴, 그리고 MVC에서 파생된 MVVM(View Model), MVW(Whatever)들의 패턴을 사용했습니다. 이 패턴들은 양방향 바인딩을 통해 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜줍니다. 핵심은 변화시켜준다는 부분입니다. 첫 화면을 보여주고, 변화에따라 필요한 곳을 바꿔줍니다.

브라우저의 Workflow

  1. Dom Tree 생성: 브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 Dom 노드로 이뤄진 트리를 만듭니다. 각 노드는 HTML 엘리먼트들과 연관되어있습니다.
  2. Render Tree 생성: 외부 Css 파일과 각 엘리먼트의 inline 스타일을 파싱합니다. 스타일 정보를 사용하여 DOM 트리에 따라 새로운 렌더 트리를 만듭니다.
  3. Layout(reflow): 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어집니다.
  4. Painting: 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출하여 색을 입힙니다.
  5. Dom에 변화가 생기면, 렌더트리를 재생성하고(모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅하는 과정이 반복됩니다.

Virtual DOM

변화(Mutation)는 상당히 복잡한 작업입니다. 특정 이벤트가 발생했을때 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떤 방싣으로 뷰를 업데이트할지 로직을 정해야합니다.

Mutation하지 말고 데이터가 바뀌면 뷰를 날리리고 새로 만들어버리자!

그래서 사용한게 Virtual DOM 입니다. 변화가 일어나면 자바스크립트로 만들어진 가상 DOM에 적용시키고, 모든 연산이 끝난 후 기존의 DOM과 비교한 다음 최종적인 변화를 실제 DOM에 던져줍니다. 이렇게 Virtual DOM은 DOM 변화를 최소화 시켜주는 역할을 하여 성능을 개선시킵니다.

React만 Virtual DOM을 사용하나?

리액트는 단지 Virtual DOM을 성공적으로 사용한 선발주자입니다. Virtual DOM을 사용하는 라이브러리는 꽤 많습니다.

  • Vue
  • Marko
  • Maquette
  • Mithril

3. 출처