React.js 와 Vue.js 공통점과 차이점은?

React와 Vue는 *컴포넌트 기반이고 *Virtual DOM 방식이라는 공통점이 있고, 가볍고 빠르다.

 

*컴포넌트(Component)

- 유저가 사용하는 시스템에 대한 조작장치를 이야기한다. 통상 컨트롤(Control)이라고도 하고 UI라고도 한다. 컴포넌트의 종류에는 page, header bar, footer bar, navbars, button, form 등이 있다.

 

*가상 돔(Virtual DOM)

- 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다.

 

1. 컴포넌트 기반

 React와 Vue 모두, 웹 UI를 작은 컴포넌트 단위로 구성한다. 컴포넌트는 다른 프로젝트에서도

 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해진다.

 

2. Virtual DOM

 실제 DOM 변화를 최소화시켜주는 역할

 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더 트리 생성, 레이아웃, 페인팅 과정을 거친다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정 역시 20회가 이루어진다. 작은 변화에도 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하된다. 

Virtual DOM은 뷰에 변화가 있으면 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용 시키고 최종 결과만 실제 DOM에 전달한다. 따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식해서 한 번의 렌더링 과정만 거치게 된다.

 

두 프레임워크는 공통된 기반을 공유하기 떄문에 유사한 측면이 많지만 구별되는 특징도 존재한다.

 

Vue

- 단일 파일 컴포넌트(Single File Component)  Vue는 단일 파일 컴포넌트 기반의 프레임워크다. 웹의 뷰(view)를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 이런 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있다.

 

- HTML 기반 템플릿 Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링 하는 과정에 템플릿이란 문법을 사용한다. 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉽다.

React

- 거대한 커뮤니티 페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많다. 또 이미 React를 사용하고 있는 개발 프로젝트가 많기 때문에 개발자 채용 시 React를 다룰 줄 안다는 것이 장점으로 작용할 수 있다.

 

- JSX 기반 컴포넌트 구문 템플릿 방식으로 관리하는 Vue와 달리 , React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태를 변화시키지 않고 관리한다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바 스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트한다. 템플릿은 재구조화가 어렵고, 에러에 취약하지만 React는 상태를 고유 속성대로 유지하기 때문에 대규모 프로젝트에서도 관리가 수월하고 테스트에도 적합하다.

 

아래 간단한 코드로 차이점을 보자

 

아래 코드는 간단한 Vue App이다. Hello Vue.js! 라는 message를 출력하고 버튼을 누르면 해당 메시지가 역순으로 바뀐다.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

이와 반대로 React App 은 Template 구조를 사용하지 않고, 개발자가 JSX 를 사용하여 자바스크립트에서 DOM을 생성한다.  위 Vue와 동일한 기능을 하는 React 코드입니다.

<div id="app"></div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({
      message: this.state.message.split('').reverse().join('')
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}
ReactDOM.render(App, document.getElementById('app'));

 

Vue의 장점

 - Template 과 Render Function을 모두 사용할 수 있는 옵션

 - 간편한 Syntax와 프로젝트 설정

 - 빠른 렌더링과 더 작은 용량

 

React의 장점

 - 큰 규모에 적합, 테스팅이 수월

 - Web과 Native 앱 개발에 모두 사용 가능

 - 더 큰 개발자 생태계에서 오는 많은 레퍼런스와 도구들

 

공통된 특장점

 - Virtual DOM으로 빠른 렌더링

 - 경량 라이브러리

 - Reactive Component

 - Server Side Rendering ( 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법 )

 - 라우터, 번들러, state management와 결합이 쉽다.

 

 

 

참고글

https://library.gabia.com/contents/8284/

https://joshua1988.github.io/web_dev/vue-or-react/