본 글은 Aris Pattakos님의 Angular vs React vs Vue 2022 를 참고한 포스팅입니다. 오역, 피드백 등은 답글을 달아주세요!
웹 어플리케이션을 제작할때, 아마도 한번쯤은 들어보셨을 프레임워크 2개가 있는데, 바로 React, Vue.js다.
리액트는 UI 라이브러리로, 뷰는 진화하는 프레임워크로 알려져있다. 2개의 프레임워크는 프론트 어플리케이션을 만들때 거의 대체 가능하지만 완벽하게 같진않다.
각각의 프레임워크는 component-based하고, UI를 빠르게 제작하는데 용의하게 만들어졌다.
하지만, 각각의 스트럭쳐와 아키텍쳐에 차이가 있는데, 지금부터 각각의 장단점과 만들어지게된 철학에 대해 설명하고자 한다.
차이점
1. Architecture
2. Popularity
3. Ecosystem
1. Architecture
React
리액트는 특정한 스트럭쳐를 강요하진 않는다, 그리고 밑에 예제에서 볼 수 있듯, 리액트 사용을 몇줄 안되는 코드로도 실행이 가능하다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);리액트는 특정한 프로젝트 구조 없이 UI 라이브러리를 만들때 보통 사용된다. 이게 리액트가 엄격히, "프레임워크"까진 아닌 이유이다.
리액트 element는 리액트 엡에서 가장 작은 블록이다. DOM elements보단 더 강력하다고 할 수 있는데, 그 이유는 어떤 변화가 있을때마다 React Dom이 최신화를 하기 때문이다.
Component는 다시 사용가능한 조각과 독립적인 element보단 큰 블록이라고 정의된다. 컴포넌트는 input과 props를 받아서 유저에게 보여지는 element를 생성한다.
리액트는 JavaScript로 제작 되지만, 대부분 JSX와 합쳐져 있다. 이러한 확장된 문법이 당신이 HTML, JavaScript를 포함한 element를 만드는 것을 허용한다.
당신이 만든 어떠한 JSX도 React JavaScript API로 제작될 순 있지만, 사람들은 직관성 때문에 JSX 자체를 선호한다.
Vue
vue.js의 핵심 library는 view 레이어에 집중한다. 뷰가 진화하는 프레임워크로 불리는 이유는 사용자가 3자 패키지(Vue Router 나 Vuex)를 사용할 수 있는 기능 더분이다.
뷰가 MVVM(Model-View-ViewModel)과 엄격하게 연관이 되어있진 않더라도, MVVM에서 영향을 받은것은 사실이다. 뷰를 통해 사용자는 ViewModel layer을 사용할것이고, 이것은 어플리케이션 데이터가 최신화된 뷰로부터 프레임워크가 사용되는것을 체크해준다.
뷰애 템플릿은 사용자가 뷰 컴포넌트를 만들수 있게 하고, 비슷한 HTML을 합쳐준다. 이러한 이유로, 자바스크립트와 JSX가 사용가능 할지라도 이 템플릿이 조금더 선호된다.
뷰에서 컴포넌트는 어플리케이션 내에서 매우 작고, self-contained 하고, 재사용 가능하다. Single File Components(SFCs)는 HTML, CSS, JavaScript를 포함하고 한 파일에 모든게 합쳐져있다.
SFCs는 특히 큰 단위의 vue프로젝트에서 선호된다. 웹펙이나 Browserfy같은 도구는 SFCs에서 자바스크립트로 변환되어야 사용이 가능하다.
2. Popularity
React
리액트의 깃헙 별 수는 160,000개로, 자바스크립트 프로젝트중 가장 인기있는 프로젝트이다. 리액트는 페이스북에서 만들어지고 관리되며, 페이스북 내에서도 많은 프로젝트가 리액트로 진행되고 있다. 추가로, BuiltWith에 따르면, 약 2,000,000개의 웹사이트가 리액트로 제작되어있다.
Vue
뷰는 깃헙 별 수가 176,000개로 가장 높은 평점을 갖고 있다. 뷰는 Google에서 일한적이 있는 Evan You가 제작했다. 뷰를 통해 제작된 홈페이지는 1,000,000개로 엄청나게 인기있는 웹 프레임워크다.
3. Echosystem
오픈소스 패키지는 사용자로 하여금 어플리케이션을 개발함에 있어 엄청나게 시간을 줄여준다. 또한 오픈소스 패키지들은 그들끼리 경쟁함으로서, 더 나은 패키지가 살아남는 방식으로 점점 더 고도화 되어간다.
따라서, 어떤 기능을 만들때 이미 사용 가능한 컴포넌트나 themes를 찾아보고 만드는게 사용자가 쉽게 기능을 추가하는 방법이다.
React
많은 프론트엔드 어플리케이션은 로그인이나 다른 유저 세팅 정보를 저장하기 위해 전역 상태 관리에 의존한다. 상태관리를 할때 가장 유명한 자바스크립트 프로젝트는 Redux다.
리액트가 유명해짐에 따라, 바로 사용가능한 컴포넌트와 엘리멘트를 찾는게 굉장히 쉬워졌다.
리액트의 또 다른 유명한 echosystem은 React Native다. React Native는 IOS와 안드로이드 어플리케이션을 리액트 코드만으로 만들 수 있게 해준다. 따라서, 리액트는 모바일 어플리에키션을 만들때도 좋은 선택이 될 수 있다.
리액트는 MERN stack에 일부인데, 이것은 MongoDB, ExpressJS, React, NodeJS다. 이게 강력한 이유는 자바스크립트 언어 한가지로 어플리케이션 하나를 만들 수 있다는 것이다.
Vue
뷰에서도 Redux를 사용할 순 있지만, 공식적인 방법이 존재하는 것은 아니다. 하지만 뷰는 Vuex를 통해 상태관리를 할 수 있기 때문에 문제가 될건 없다.
초창기에 뷰는 사용 가능한 컴포넌트의 부재가 있었다. 하지만, 커뮤니티가 커짐에 따라, 뷰 또한 컴포넌트나 엘리멘트가 증가하는 추세이다.
모바일 어플리케이션을 위해, 뷰에서는 Weex라는 프로젝트를 진행중에 있다. Weex는 알리바바에서 만들어졌는데, 리액트 네이티브만큼 탄탄하거나 강력하진 않다. 또한, 이 프로잭트가 중국에서 시작되었기 때문에, 영어로된 해결책이나 문서를 찾는게 쉽진않다.
정리하자면
React
- 특정 UI를 architecture을 강요하지 않아서 자유도가 높음
- 현존하는 가장 인기있는 Web Frame Work
- Redux와 React Native 등 강력한 생태계를 갖고 있으며, 웹이 아니더라도 IOS, Android로도 확장이 가능함
Vue
- MVVM과 비슷한 디자인 패턴을 사용함
- 충분히 인기있는 Web Frame work
- Weex같은 프로젝트를 통해 확장 가능하지만 영어 문서를 찾는게 어려움
