React의 탄생 배경과 Virtual DOM

by Seongmun-Hong — on  ,  ,  , 

React의 탄생 배경과 Virtual DOM

1. 간단한 React 탄생 배경

JQuery, Backborn, AngularJS, React

2006년 John Resig가 Jquery를 발표한 이후, Jquery가 DOM을 다루는 방식은 지금까지도 가장 쉽고 효율적인 방식으로 인정받고 있으며, 오랜 세월동안 사실상의 표준으로써 군림했다.

Backbone과 AngularJS를 위시한 SPA(Single Page Application)이 보다 구조화된 프론트엔드 환경을 제시하기 시작했다.

그러나 Jquery가 몰락한 것은 아니며, Backbone과 AngularJS는 역시 DOM을 다루는 중요한 방법으로써 Jquery를 사용했다.

이 상황에 완벽하게 균열을 내면서 등장한 것이 React (Facebook에서 만든 Javascript 라이브러리)이다.

2. React의 3가지 중요한 특징

2-1. Component

  • Component는 UI를 구성하는 개별적인 뷰 단위이다.
  • 전체 앱은 각 Component들이 결합해서 만들어진다.
  • 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다.

2-2. JSX

  • JSX는 React를 위해 태어난 새로운 자바스크립트 문법으로, 과거 페이스북이 만들었던 PHP의 개량판 XHP에 그 기원을 두었다.
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)
  • 위 코드는 “Hello, John”라는 div를 생성하는 컴포넌트이다.
  • React는 작성한 코드를 컴파일하는 과정을 꼭 거쳐야 한다.
    • Babel의 React 플러그인을 통해 위의 코드를 컴파일하면 아래와 같은 코드가 된다.
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

JSX를 사용하는 이유

JSX를 사용하지 않고 바로 위의 코드처럼 직접 순수한 자바스크립트 코드를 작성하여 React를 사용할 수도 있지만 실제로 그렇게 사용하는 경우는 거의 없다.

React를 사용하는 중요한 이유 중 하나를 포기하는 것과 같다.

JSX는 보통 선언적이라고 번역되는, Declarative한 개발을 도와주는 도구이다.

  • 한눈에 이해하기 쉽다.
  • 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있다.
  • 예측가능한 개발을 만들어줄 뿐 아니라 유지보수, 협업 등에서도 엄청난 강점을 발휘한다.

2-3 Virtual DOM

결국 위의 모든 것을 가능하게 만들어주는 것, 그리고 React의 가장 큰 특징이 Virtual DOM이다.

DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다.

그러나 문제는 이러한 DOM을 효과적으로 다루는 것이 힘들다.

JQuery의 문제점

Jquery는 누구나 쉽게 DOM을 조작할 수 있도록 하는 아주 멋진 도구였다.
하지만 Jquery는 뭔가 구조적 대안이라고 보기는 힘들다.

앱 전체에 무분별하게 Jquery가 난무하고 있는 코드들…

Javascript로 간단한 계산도 못해도 Jquery는 쓴다느니, 남이 쓴 Jquery를 그냥 갖다 붙이면 된다느니 하는 말이 나오는 것이 바로 Jquery의 장점과 단점을 모두 보여준다.

DOM에 대한 새로운 접근

class HelloMessage extends React.Component {
  render() {
     return (
        <div>
          <div>Hello {this.props.name}</div>
          <div>I am {this.state.chatName}</div>
       </div>
    );
  }
}

이 HelloMessage 클래스는 만약
this.props.name = “Alex”
this.state.chatName = “Thom” 이라면,
“Hello Alex”, “I am Jenny” 라는 글자를 유저에게 보여주는 컴포넌트이다.

만약 name은 그대로이고 chatName = “Mary” 로 바뀌게 된다면 ?

“Hello Alex”, “I am Mary”라는 결과가 브라우저에 나타날 것이다.

하지만 React는 여기서 한번의 작업 과정을 더 거친다. 그리이 이곳이 바로 Virtual DOM이 자신의 역할을 수행하는 부분이다.

  1. React 컴포넌트는 render를 다시 호출하여 새로운 결과값을 return한다. 하지만 이 return 값은 바로 DOM에 반영되지 않는다. (바로 브라우저에 렌더링되지 않는다)
  2. React는 새로운 return 값을 가지고 새로운 Virtual DOM을 만든다.
    • React안에 있는 div들은 진짜 html이 아니라 Babel에 의해 컴파일되는 JSX
    • render함수가 return하는 것은 새로운 Virtual DOM을 만들기 위한 재료
  3. 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 어떤 부분이 달라졌는지 찾아낸다.
  4. 바뀐 부분만 진짜 DOM에 적용한다.
  5. 브라우저는 이 DOM을 해석하여 유저에게 새로운 화면을 보여준다.

컴포넌트가 첫번째 render 함수를 호출하면서

<div>Hello Alex</div><div>I am Jenny</div>

라는 값을 return 했다고 가정한다.
이후 컴포넌트의 this.state.chatName가 Mary로 바뀌어서 render 함수가 다시 호출된다.

컴포넌트는

<div>Hello Alex</div><div>I am Marry</div>

을 다시 return한다.

그런데 여기서 this.state.chatName(Jenny -> Mary)는 변경되었지만, this.props.name(Alex)은 그대로다. Virtual DOM은 비교 작업을 통해서 이것을 찾아낸다.

그리고 최종적으로는 진짜 DOM에서

<div>I am Jenny</div>

를

<div>I am Mary</div>

로 변경한다.

왜 이렇게 번거로운 비교작업을 거치는 것일까?

바로 DOM을 직접 바꾸면 안될까?

브라우저에게 DOM을 해석하고 렌더링 하는 것은 굉장히 비싼 작업이다.
Virtual DOM은 그 작업을 미리 최적화시켜줄 뿐만 아니라, 컴포넌트 단위로 묶어서 관리할 수 있게 해준다.

Virtual DOM은 단순한 DOM 조작 도구가 아니라 컴포넌트 단위로 움직이는 Declarative한 개발을 구현하기 위해 도입된 것이다.

Reference

  • https://medium.com/@RianCommunity
  • https://velopert.com/3236
Share :

Comments

Seongmun-Hong's photo Author

Seongmun-Hong

hsm63746244@gmail.com