해당 post는 한상훈,플렉스웹 CEO, 님 의 글을 공부 및 개인참고용의 목적으로 각색한 것임을 분명히 밝힙니다. : https://brunch.co.kr/@skykamja24/573
리액트는 UI 라이브러리 이다.
라이브러리는 참조가 쉽고, 라이브러리의 일부만 가져와서 사용하기 편리하다.
리액트는 'UI' 라이브러리 이므로 리액트 그 자체만으로는
전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지는 않는다.
리액트에서 이 기능들을 사용하려고 한다면 Redux,Mobx 등을 사용해야 한다.
뷰는 JS Progressive Framework 이다.
프레임워크가 아니라, 프로그레시브 프레임워크 임을 숙지하자.
'Vue.js 철저입문'(카와구치 카즈야)의 첫 챕터에는 "Vue.js는 뷰 레이어에 특화된 라이브러리이다." 라고 말한다.
프레임워크라고 하더니 라이브러리라고 한다.
하지만 바로 이 대목이 Progressive Framework 그리고 Vue의 정체성을 보여준다.
Vue를 라이브러리 처럼 사용할 수 있도록 처음부터 설계했고, 그러한 이유로 라이브러리라고 할 수 있지만, 지향하는 방향은 "프로그레시브 프레임워크"인 것이다. 즉, 일반적인 프레임워크보다 높은 자유도를 가지며 시스템 수준에 따라 프레임워크의 활용도를 결정할 수 있게 설계한 것이다.
프레임워크(V) VS 라이브러리(R) 차이점
프레임워크는 코드를 프레임에 맞춰서 개발한다. 뷰에서 파일을 만들 때는 .vue 라는 확장자 형태에 맞춰서 사용한다. .vue가 아니라 .js로 파일을 만들어 사용할 수 있지만 효율성이 극적으로 떨어진다.
이처럼 프레임워크는 프레임을 개발하는 데에 최적화 된 형태일 뿐 아니라, 라이브러리와 달리 더 많은 기능을 디폴트로 제공한다.
React & Vue 의 코드 형태
: Vue의 근소 승
리액트와 뷰의 결정적 차이 중 하나는 코드형태이다.
리액트는 Javascript XML : JSX 형태로 코드를 작성하는데, Javascript만을 이용해 UI로직과 DOM을 구현한다.
반면 Vue의 경우 HTML,JS,CSS 코드 영역을 분리해서 작성한다. 예를 들어 하나의 .vue 파일을 만들 때에도 패턴이 정해져 있다.
<template> 에는 HTML,
<script> 안에는 javascript,
<style> 안에는 css 를 작성한다.이러한 패턴 덕분에 뷰가 리액트보다 코드 가시성 및 생산성이 좋다고 평가받기도 한다.
Typescript is best friend with React
: React 승
일반적으로 Vue가 코드를 작성하기 쉬우며 생산성이 잘 나오지만, 리액트가 현업에서 큰 인기를 끌고있는 데에는 분명한 이유가 많다.
그 중 하나로,
타입스크립트로 대표되는 자바스크립트의 정적 표현이 리액트를 사용할 때 더욱 편리할 뿐 아니라, 함수형 프로그래밍을 적극적으로 사용하기 쉽다는 이유가 있다.
함수형 프로그래밍을 위해서는 순수 함수 및 매개변수의 데이터 타입을 고정하는 작업이 필수적인데, typescript를 사용해 쉽게 처리할 수 있을 뿐만 아니라 리액트를 이용해 모든 코드를 Typescript로 표현하는게 vue보다 쉽다는 점이 위의 이유가 된다.
물론 Vue도 ts를 지원하지만, 많은 부분에서 ts용 모듈을 사용해야 하며 복잡하고 호환성이 많이 떨어지기에 매우 어려운 길이 될 수 있다.
Vue와 React의 진입장벽
: Vue 승
REACT의 진입장벽
리액트의 진입장벽이 압도적으로 높다.
배워야할 것이 압도적으로 많으며, 그만큼 코드의 자유도가 높다.
프론트에서 가장 중요한 상태관리만 해도 압도적인 학습량의 차이가 있다. 리액트는 mobX, 리덕스, 리코일 등 상태관리 트렌드 변화도 알아야 하며, 리덕스의 경우 수 많은 미들웨어에 대한 이해도 현업에서 중요하다.
또한 연동되는 모듈의 수가 압도적으로 차이난다.
리액트 생태계가 풍성하고 방대한 만큼, 배워야 할 것들이 비약적으로 많은 것이다. 회사마다 코드패턴, 아키텍처가 다 다르기에 더 나은 코드에 대한 고민도 많이 필요하게 된다. 이것은 리액트가 UI 라이브러리이기 때문에 기인하는 현상이다.
초보자는 리액트를 배워도, 상태관리, 라우팅, 빌드 시스템 등을 모두 만들억 나가는것이 버거운 일이 된다.
하지만 뷰는 리액트의 어려움을 어느정도 해소하고자 만들어진 부분이 있기 때문에, 해당 기능들에 대한 구축 및 개발을 빌트인에 가까운 수준으로 설명하고 사용할 수 있다. (물론 vuex, vue-routing 등의 모듈을 사용해야 한다)
이런 빌드의 어려움으로 리액트에선 "create-react-app" : https://reactjs.org/docs/create-a-new-react-app.html 을 만들었다.
cli 명령 하나로 리액트를 사용한 프로젝트를 빠르게 만들어주어 매우 간편하다. 그럼에도 불구하고 이것에 들어가는 디테일들을 알아가는것이 어려운 것임에는 변함이 없다.
Vue의 진입장벽
뷰는 상대적으로 낮은 진입장벽을 가진다.
개발자들은 뷰를 배울 때, vue-cli 를 이용해 프로젝트를 만들고, 이 코드들을 수정해나가며 하나하나 업그레이드 하게 된다.
페이지,컴포넌트,라우팅 등을 이미 주어진 코드 프리셋에서 조금씩 수정하면서 만들다 보면 훨씬 쉬울뿐더러, 앞서 말한 CODE 형태가 HTML,JS,CSS 영역으로 분리되어 있기에 이해하기 쉽다.
리액트에서 처음 마주하게 되는 코드 중 하나가
React.createElement()인데, 엘리멘트를 생성할 때 사용하는 명령이라는 것은 알 수 있지만, 이 안에 들어가는 매개변수는 3가지이다.
표현하자면 React.creatElement( component, props, children)이다.
결론
이 글의 원저자 한상훈님은
- 사용성과 생산성 측면 : 뷰 승리
- 트렌드와 범용성 측면 : 리액트 승리
npm의 주간 다운로드횟수 통계에 따르면
리액트(1000만회) VS vue(240만회) 라고 한다.
함수형 프로그래밍 및 정적 데이터 타입을 사용하는 것은 웹 개발을 이끄는 하나의 트렌드가 되고있다.
백엔드 서버가 GraphQL 및 ts로 구축된 경우라면 프론트에서도 데이터를 정적으로 맞춰줘야 에러 핸들링이 더 간편해지고, 완성도가 높아지는데 이 때, 리액트가 뷰에 비해 훨씬 유리하다.
그러나 뷰가 제공하는 코드 작성 패턴과, 라이프 사이클, 상태 관리는 쉬우면서 강력하여 거의 원하는 모든 형태의 애플리케이션을 빠르게 만들 수 있도록 한다.
한상훈 저자님은 vue와 react의 공부가 공부의 확장성 측면에서 1+1이 아니기에 두가지를 모두 맛보고 공부해보기를 권했다.
