React.js vs Vue.js 자세한 비교 (1) - 공통점

프론트엔드 개발자들 사이에서 "엄마가 좋아 아빠가 좋아?"와 같은 문제들 중 하나가 바로 프론트엔드 프레임워크 비교일것 같다.

당연히 다들 자기가 쓰고있는거에 만족하고 있는데에다가, 세대교체가 아닌이상 여러가지를 현업에서 쓰지 않으니 함부로 비교하기 애매하긴 하다.

2019년까지 프론트엔드 라이브러리 3대장을 꼽으라고 하면 Angular, React, Vue 였다.

최근에는 svelte, flutter가 등장해 관심의 대상이 되었지만, svelte는 아직 실무에서 쓰기에는 섣부른것 같고, flutter는 웹보단 앱 개발에 특화된 프레임워크다. Angular는 flutter 때문인지 여기에 이름이 올라버렸다.

결국 남은건 React와 Vue.

어쩌다보니 둘다 실무에서 써보게 되었고, 몇가지 흥미로울만한 공통점과 차이점을 느끼게 되어서 그런 것들에 대해 써보아야겠다.

우선 양쪽 다 존재하는 것들부터 먼저 정리해보자

컴포넌트 기반 SPA 라이브러리 라는 점

당연하게도, React와 Vue 둘 다 단순 템플릿엔진을 표방하는 친구들은 아니다. 네이티브 문법에 템플릿 기능이 들어있는 2019년엔 고작 HTML에 변수 넣어서 작성하는 기능으론 라이브러리 소리도 못듣는다.

컴포넌트 단위로 변화사항을 감지하고 렌더링이 필요한 부분만 바꾸어주는 기능은 양쪽의 프레임워크가 목적론적으로나 방법론적으로나 동일하다.

둘다 virtual DOM을 기반으로 하며, tree알고리즘을 통해 변화사항을 찾아낸다.

때문에 몇가지 제한사항 같은것들도 서로 닮은 점이 있다. 가령 각 컴포넌트의 HTML에 해당하는 코드는 단일 노드로 감싸져있어야 한다던지, 목록을 출력할때 각각의 항목이 구분될 수 있는 고유한 문자열을 할당해주어야 한다던지 (key props) 등.

props, state, lifecycle

둘 다 컴포넌트 단위로 코드를 작성하는 친구들이다보니, 컴포넌트의 기본적인 구성요소도 겹치는 것들이 있다. 대표적인게 props와 state, 그리고 lifecycle 이다.

세부적인 명칭이나 사용법 등은 물론 조금씩 다르긴 하지만, 지향점은 같다.

라우터, 전역 상태관리 도구

SPA를 통해 여러 페이지를 보여주기 위한 라우터 역시 리액트와 뷰 둘다 존재한다. 차이점이라면 리액트는 3rd party library에서 그걸 지원해주고 있고, 그 상황을 지켜보면서 만들어진 뷰는 공식 라이브러리도 함께 만들어서 내놨다는 점 정도이다.

전역 상태관리 도구 역시 비슷하다. 리액트는 제 3자에 의해 redux 같은게 만들어졌고, 후발주자인 vue는 시작할 때 부터 redux와 redux-saga가 합쳐진 형태의 전역 상태관리 도구인 vuex를 만들어서 공식으로 내놨다.

cli, webpack, ...

둘다 기본 프로젝트 구조를 만들어주는 툴을 cli로 제공하고 있다. webpack 기반으로 번들링 해주는 기능 역시 마찬가지로 존재한다.

mobile application을 위한 Native 지원

둘다 모바일 앱 개발용 도구를 지원한다. 이 부분은 신기하게도 앞서 말했던부분과 정 반대의 관계인게 있다.

리액트 네이티브는 페이스북에서 공식적으로 지원하는 라이브러리이며,
뷰 네이티브는 서드파티 라이브러리이다.

아무래도 페이스북은 리액트로 모바일 앱을 직접적으로 개발하고 있다보니, 다른건 서드파티한테 맡기더라도 이런건 직접 하는것으로 보인다.

SSR Framework

둘다 서버사이드 렌더링용 웹서버 프레임워크가 있다. webpack 기반 자바스크립트이다보니 둘다 nodeJS 기반이다.
리액트는 nextjs, 뷰는 nuxtjs.