vue.js 사용기

이전 프로젝트에서는 React.js 를 사용해서 프론트엔드 개발을 진행을 했었는데 이번 프로젝트에서는 Vue.js 을 메인으로 사용하여 개발을 진행하게 되었다.
처음 Vue.js로 접하고 개발하면서 느낀점과 React.js와 비교하여 사용기를 적어보려고 한다.

컴포넌트 차이

• Vue

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

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

• React

  • JSX 기반 컴포넌트
    템플릿 방식으로 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리한다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 한다.

재사용 측면 차이

컴포넌트를 분리할 시에 React.js는 한개의 파일에서 새로운 함수형 컴포넌트를 쉽고 깔끔하게 정의해서 만들수 있으며, 부모에서 자식으로 props 를 전달해주는 과정이 함수에 인수 전달하듯이 매우 매끄럽게 진행된다.

하지만 Vue.js에서 새로운 컴포넌트를 분리하려면 일단 새로운 파일을 하날 더 만들어야 하고, 그에 따라 하나의 파일에 해당하는 template script style 도 작성해야 할 것이다. 또 props를 전달하는 과정도 2개의 파일을 오가며 해야 한다.

컴포넌트를 작은 단위로 분리하고 재사용 하는 프로세스에 있어서는 React.js가 더 효율성이 높다고 생각한다.

사용방법 차이

• React.js와 Vue.js 수명 주기 흐름은 일반적으로 동일하며 세부적인 명칭이나 사용법 등은 물론 조금씩 다르긴 하지만 지향점은 같다.

• React.js 코드를 작성하는 방법이 매우 자유롭다. 자바스크립트 코드를 자유롭게 작성하여 사용 할수 있고 Vue.js는 vue 문법으로 작성을 해야 되기 때문에 자유도는 떨어지지만 코드 작성방법이 제한적이기 때문에 개발자들간에 협업을 할때 코드 작성 스타일 방식 관리가 React.js 보단 편리하고 용이하다.

• React.js 보다 Vue.js가 배우기 쉽고 러닝커브가 높지 않다고 생각한다.
  React에서 JSX라는 특별한 Template 언어를 사용해서 JavaScript와 HTML,CSS를 통합 시켰다면 Vue.js는 그냥 HTML을 사용하는 것 같은 느낌이다. 그래서 더 단순하고 쉽다.

• Vue.js의 싱글파일 컴포넌트는 과거에 html, js, css로 개발하던 방식과 매우 유사해서 jsp등으로 개발하던 웹 개발자들 쉽게 적응 할수 있는 느낌을 받을 수 있다.
  그리고 퍼블리셔와 협업하는 상황이라면 JSX를 사용하는 React.js 보다는 Vue.js를 사용하는게 훨씬 작업하기 용이하다.