React vs Vue (1)

3 min readJan 27, 2019

React(Facebook)와 Vue(Evan You)의 특징을 비교해 보자.

공통점

DOM 조작을 최소화 하기 위해 가상돔(Virtual DOM)을 활용
재활용 가능한 컴포넌트(Component) 단위로 사용
단방향 데이터 흐름 (parent > child)
코어 라이브러리(UI 구성)에 집중
라우팅 및 전역 상태관리 등은 써드파티 라이브러리(3rd library)와 결합
서버사이드 렌더링 Next(React) / Nuxt(Vue)

차이점

데이터 바인딩(data binding)

// Vue
data() {
    return {
        name: ""
    }
}
// ...
this.name = "Jack"

Vue는 data 객체를 생성하고 this.name = “Jack” 비교적 자유로운 방식

// React
this.state = {
    name: ""
}
// ...
this.setState({
    name: "Jack"
})

React는 state 객체를 만들고 setState()를 통해서 업데이트 하는 방식

…

구성

// .vue (Vue)<template>
    <div></div>
</template><script>
    export default {
        data() {
            return {}
        }
    }
</script><style></style>

Vue는 템플릿(Templates) 형식으로 컴포넌트 안에 HTML, CSS, JS를 함께 가진다.

// .js (React)import React, { Component } from 'react'
import './style.css'class ToDo extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }    render() {
        return (
            <div></div>
        )
    }
}export default ToDo

React는 JSX를 사용해서 HTML을 작성하고 CSS 파일을 분리한다.

렌더링 성능

렌더링 성능을 측정하기 위해 몇년 전에 비교된 이미지 결과이다. 하지만 최근까지도 Vue가 렌더링 성능 면에서 빠르고 가볍다.

Vue는 템플릿 기반 으로 가독성이 좋고 배우기 쉽다는 장점이 있다. 버전 3. 에서는 UI로도 설치가 가능하고 성능도 더 향상되었다. (격어보진 못했지만 프로젝트가 커지게 되면 템블릿은 런타임 에러가 나오기 쉽고, 테스트와 재구조화 하기가 쉽지 않다는 의견이 있다.)

React는 JS로 만들어져 컴포넌트 구성이 쉽고, 재활용성이 높다. Vue 역시 render()를 사용해서 JS로 컴포넌트 구성이 가능하지만 JS기반 React가 좀더 완성도 있는 구성과 테스트, 유지보수에 유리하다. 이는 복잡도가 높은 프로젝트에서 좀더 고려될만 하다.

React : https://reactjs.org/

Vue: https://vuejs.org/

React vs Vue (1)

Written by MNIII

No responses yet