React와 Vue.js — 3

Published in

cashwalk

9 min readSep 12, 2018

이 전 내용은 React와 Vue.js-2을 참고하세요.

프로젝트 셋팅

React와 Vue.js 모두 규모가 있는 프로젝트를 구현하기 위해서는 babel, webpack 등 셋팅해야하는 것들이 많다. 하지만 두 라이브러리 모두 CLI를 제공하고 있어서 간단하게 프로젝트 셋팅이 가능하다.

React CLI

facebook/create-react-app: https://github.com/facebook/create-react-app

설치

npm install -g create-react-app

글로벌 패키지를 설치해준다.

App 생성

// create-react-app <app-name>create-react-app hello-world

위 명령어를 통해 <app-name>에 해당하는 프로젝트가 생성되며 자동으로 스크립트를 통하여 dependency package 들을 node_modules/react-scripts 디렉토리 하위에 설치한다.

실행

yarn start

create-react-app은 yarn이라는 (페이스북에서 만든) 새로운 자바스크립트 패키지 매니저를 사용한다. 페이스북은 코드베이스가 커지면서 npm 을 사용할 때 일관성, 보안, 성능에 문제를 겪게 되었고 Google, Exponent, Tilde의 개발자들과 함께 npm client를 대체할 새로운 패키지 매니저 yarn을 만들었다. 이미 널리 쓰이고 있는 npm과 비교했을 때, 더 빠르고 안정적이라는 장점이 있다.

yarn 에 대한 자세한 내용은 이 곳을 참고하시기 바랍니다.

Vue CLI

설치

npm install -g vue-cli

App 생성

// vue init <template-name> <project-name>vue init webpack my-project

템플릿

vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다. vue-list 명령어를 통해 템플릿 리스트를 확인할 수 있으며 자세한 내용은 vuejs-templates 저장소를 통해 참고하길 바란다.

browserify : A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
browserify-simple : A simple Browserify + vueify setup for quick prototyping.
simple : The simplest possible Vue setup in a single HTML file.
webpack : A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
webpack-simple : A simple Webpack + vue-loader setup for quick prototyping.

FLUX

단방향 데이터 흐름

React와 Vue.js 의 컴포넌트 데이터 흐름은 부모에서 자식 컴포넌트로 데이터를 전달해주는 단방향 데이터 흐름을 갖고있다. 즉 부모 컴포넌트의 값이 바뀌면 자식 컴포넌트의 값도 업데이트 되지만 그 반대는 안된다는 말이다. 단방향 데이터 흐름을 통해 자식 컴포넌트가 부모의 상태를 변경하여 앱의 데이터 흐름을 추론하기 어렵게 만드는 것을 방지할 수 있다.

Flux

Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐다. 단방향 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 한다.

(사전 작업) store는 dispatcher 에 자신의 callback을 저장하도록 하며, controller-view는 store에게 액션이 발생하면 알려달라고 한다.

Action creator: 라이브러리에서 제공하는 helper method로 메서드 파라미터를 통해 action을 생성하고 type을 설정하거나 dispatcher에게 제공한다.
Dispatcher: dispatcher에 저장된 store의 callback 을 통해 모든 action을 모든 store에게 보낸다.
Store: action을 받은 후 store를 업데이트하고 자신이 변경되었다고 알린다.
controller-view: 이벤트가 발생함을 듣고 store로 부터 새로운 데이터를 받은 후 자신 아래의 모든 view에게 새로운 데이터를 전달한다. 그 이후 controller-view 하위의 모든 view는 업데이트 된다.

Flux 패턴에 대해 그림으로 자세히 설명해 준 블로그가 있으니 참고하길 바란다. (Flux로의 카툰 안내서)

React

React의 FLUX 패턴 라이브러리는 종류가 많다. 아래는 러닝 리액트(Learning React)의 플럭스 구현 챕터에 있는 라이브러리 종류에 대해 설명한 글이다.

Flux: 페이스북의 플럭스는 방금 설명한 디자인 패턴이다. 플럭스 라이브러리에는 디스패쳐 구현이 들어 있다.
reflux: 액션, 스토어, 뷰에 초점을 맞춰 단방향 데이터 흐름을 더 단순하게 접근한다.
flummox: 자바스크립트 클래스를 상속해서 플럭스 모듈을 만들게 해주는 플럭스 구현이다.
Fluxible: 아이소모픽 플럭스 애플리케이션을 만들기 위해 야후가 개발한 플럭스 프레임워크다.
Redux: 객체가 아닌 함수를 통해 모듈화를 달성하는 플럭스와 비슷한 라이브러리다.
MobX: 옵저버블(observable)을 사용해 상태 변화에 반응하는 반응형 상태 관리 라이브러리다.

이 모든 라이브러리는 FLUX 패턴을 기반으로 변형된 것이지만 단방향 데이터 흐름이라는 개념을 동일하다. 이 중 Redux가 FLUX 프레임워크로 가장 인기가 많고 MobX는 React 의 setState 함수의 비동기성 문제로 요즘 떠오르고 있다.

상태 관리자 라이브러리를 사용하지 않아도 React에서 제공하는 Context API를 사용할 수 있다.

Redux를 적용하기 전 이 글을 읽어보세요: 당신에게 Redux는 필요 없을지도 모릅니다.

Vue.js

Vue.js는 공식 사이트에서 Vuex 를 제공하고 있다. Vuex는 Flux, Redux, The Elm Architecture에서 영감을 받아 만들어졌다고 하고 있으며, 다른 패턴과 달리 Vuex는 Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리라고 말하고 있다.

자세한 내용은 Vuex 공식 사이트를 참고하시길 바랍니다.

결론

React는 개발 방식이 (CSS 파일을 분리할 수 있긴하지만) 모든 것을 JavaScript로 구현하는 방식이며, Vue는 .Vue라는 파일 안에서 template, script, style로 구현한다. 이러한 점을 놓고 보자면 컴포넌트화는 Vue.js가 높다고 생각된다. 또한 구현 방식이 기존의 HTML, CSS, JavaScript 방식과 비슷하기대문에 둘 다 처음 접하는 개발자일 경우 Vue의 이해도가 높을 것이다. 그리고, Vue는 React에 비해 (저장소 수를 기준으로 봤을 때)규모가 작지만 vuex와 같이 Vue.js 에서 공식적으로 제공하기 때문에 정해진 틀이 있고 그걸 따르기만 하면 된다는 느낌이다.

나는 이전 회사에서 React를 사용하여 프로젝트를 만든 경험이 있고 Vue에 대한 지식이 많지 않은 상태였다. React는 많은 라이브러리가 있기도 하고 (github 저장소의 수, react: 602,619; vue: 170,831) React stateless function component 의 간단한 구현 가능하다는 장점이 좋고, 위에서 vue의 장점으로 꼽았던 것과 반대로 나는 JS에서 모든 것을 컨트롤 할 수 있다는 점이 좋다.

React를 Vue보다 먼저 접하기도 했고, 구글 트렌드 그래프에서 볼 수 있듯이 React가 지속적으로 인기있을 것이라는 점 때문에 React 를 선호하지만 객관적으로 봤을 때 어느게 좋다고 말할 수 없다고 생각된다. 개인적인 생각이지만 자신의 프로젝트에 둘 중 무엇을 접목시킬지 고민중인 개발자라면 현상황에서 1. 개발 언어 동향 2. 둘 중 어느하나의 개발지식이 있는지 3. 학습속도 4. 개발속도 에 따라 선택하라고 말하고 싶다. 추가로 통계에 따르면 현재 React가 선두에 있기 때문에 개발기간이 어느 정도 주어진다면 React를 적용해 보는 것을 추천한다.

참고자료

브라우저는 어떻게 동작되는가? (NVER D2, https://d2.naver.com/helloworld/59361)
Virtual DOM (SlideShare, https://www.slideshare.net/gyeongseokseo/virtual-dom)
다른 프레임워크와의 비교 (Vue.js, https://kr.vuejs.org/v2/guide/comparison.html)
2017년과 이후 JavaScript의 동향 — 브라우저 밖의 JavaScript (NAVER D2, https://d2.naver.com/helloworld/0473039)
단방향 데이터 흐름 (Vue.js, https://kr.vuejs.org/v2/guide/components.html#단방향-데이터-흐름)
Flux (Flux, https://haruair.github.io/flux/docs/overview.html)
플럭스 구현 (러닝 리액트, 한빛 미디어)
Flux로의 카툰 안내서 (bestalign’s dev blog, https://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/)
Redux로의 카툰 안내서 (bestalign’s dev blog, https://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/)
Vuex가 무엇인가요? (Vuex, https://vuex.vuejs.org/kr/)