Vue vs React

[topgaren]

프론트엔드 프레임워크 비교 : Vue.js & React

데이터 핸들링(Data Handling)

/*** Array concatenation in Vue.js ***/
export default
    data() {
        return () {
            arrayInVue: [1, 2, 3, 4]
        }
    },
    methods: {
        addItems () {
            this.arrayInVue.push(5);
        }
    }
}

/*** Array concatenation in React ***/
class MyComponent extends Component {
    state = {
        arrayInReact: [1, 2, 3, 4]
    }
    addItems = () => {
        this.setState({
            arrayInReact: arrayInReact.concat(5)
        })
    }
}

컴포넌트

SFC(Single File Component) 특징을 갖고 있는 Vue 컴포넌트

<template>
    <div>
        <!-- DOM이 들어갈 영역 -->
    </div>
</template>

<script>
    export default {
        // 스크립트가 들어갈 영역
    }
</script>

<style>
    /* 스타일이 들어갈 영역 */
</style>

JSX 기반의 React 컴포넌트

class MyComponent extends Component {
    render () {
        return (
            <div>
            /* DOM이 들어갈 영역 */
            </div>
        )
    }
}

문법

템플릿(Template) 기반의 Vue.js (버전 2.x 부터 Template과 render() 모두 지원)

<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

<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'));

커뮤니티

프론트엔드 프레임워크 비교 https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190

Vue에 대한 트렌드나 사용성이 점점 증가하고 있으나, 아직까진 React를 많이 사용하고 있는 추세.

정리

Vue.js의 경우 template을 기반으로 기존 웹 패러다임과 유사한 코딩을 할 수 있어 상대적으로 진입장벽이 낮다. 따라서 토이 프로젝트 개발 또는 작은 단위의 프로젝트를 수행함에 있어 적은 학습 비용으로 개발할 수 있다는 장점이 있다. React의 경우 Facebook에서 정기적이고 지속적인 지원을 통해 꾸준히 발전하고 있으며, 커뮤니티 또한 활발하여 Vue에 비해 상대적으로 많은 레퍼런스가 있다는 장점이 있다.