UI 라이브러리 vs 프레임워크
리액트
- 리액트는 UI 라이브러리
-> 리액트 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않음 - 자유도가 높음
뷰
- 뷰는 자바스크립트 프로그레시브 프레임워크
- 프로그래시브?
뷰는 라이브러리처럼 사용할 수 있도록 설계되었음. 라이브러리라고도 표현할 수 있지만, 지향하는 방향은 '프로그래시브(진보적인)프레임워크'. 즉, 일반 프레임워크보다 더 자유도가 높으며, 시스템 수준에 따라 프레임워크의 활용도를 결정할 수 있게 설계됨
자유도
- 자유도가 높은 React, 한 가지 방식대로만 하면 되는 Vue
[EX] 조건에 따라 button 보였다가 안보였다 하는 상황
리액트: 자유롭게
// && 연산자 방식
<div>
{isVisible && <button>조건에 따라 사라질 버튼</button>}
</div>
// 삼항 연산자 방식
<div>
{isVisible ? <button>조건에 따라 사라질 버튼</button> : null}
</div>뷰: v-if쓰는 한가지 방법
<div>
<button v-if="isVisible">조건에 따라 사라질 버튼</button>
</div>컴포넌트 분리, 재사용성
- 리액트는 컴포넌트를 분리할 때 한개의 파일에서 새로운 함수형 컴포넌트를 쉽고 깔끔하게 정의해서 만들 수 있음. 부모에서 자식으로 props 전달해주는 과정이 함수에 인수 전달하듯이 매우 매끄럽게 진행됨.
- 뷰에서는 새로운 컴포넌트 분리하려면 새로운 파일을 하나 더 만들어야 하고, 그에 해당하는 template script style도 작성해야 됨. props 전달하는 과정도 2개의 파일을 오가며 해야 됨.
코드 형태
-
리액트는 jsx(JavaScript XML, html 역할) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI로직과 DOM을 구현
-
뷰는 HTML, JS, CSS 코드 영역을 분리해서 작성
-
뷰가 리액트보다 코드 가시성 및 생산성이 좋다는 평이 많음
<template>
<html>
</html>
<script>
</script>
<style>
</style>
</template> Typescript
Typescript: JavaScript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어
데이터를 정적으로 맞추면 에러 핸들링이 더 간편해지고, 완성도가 높아짐
-
리액트에서는 타입스크립트를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉬움
-
함수형 프로그래밍을 하기 위해선 순수 함수 및 매개변수의 데이터 타입을 고정하는 작업이 필수적인데, Typescript를 사용해 쉽게 처리할 수 있음
-
뷰도 Typescript 지원하긴 하지만, 사용하기 위해서 많은 부분에서 Typescript 모듈을 사용해야하고, 사용하기 위해서 코드 변경에 노력이 필요
-
뷰에서는 nuxt를 사용하는 일이 잦은데, nuxt와 Typescript의 호환이 아쉬움
진입장벽
리액트
-
배워야 할 것들이나 코드의 자유도가 더 높기 때문에 리액트가 더 높음
(상태관리에서, 리액트는 mobX, 리덕스, 리코일 등의 상태관리 트렌드의 변화를 알야아 하고, 리덕스의 경우 수 많은 미들웨어에 대한 이해, 연동되는 모듈) -
리액트로 웹 어플리케이션을 제작하려면 상태 관리, 라우팅, 빌드 시스템을 모두 만들어가야하기 때문에 초심자 입장에서는 버겁게 느껴질 수 있음
-
create-react-app 명령어로 리액트 프로젝트 만들 수 있게 됨.
-> but 그 안에 세부적인 개념들을 알기까지는 시간이 걸림뷰
-
뷰에서도 vuex, vue-routing 등의 모듈을 사용해야 하지만 해당 기능에 대한 구축 및 개발을 빌트인에 가까운 수준으로 설명하고 사용할 수 있음
-
vue-cli를 통해 프로젝트를 만들고, 코드를 수정하면서 하나하나 업그레이드
-
페이지와 컴포넌트, 라우팅 등을 이미 주어진 코드 프리셋에서 조금씩 수정하면서 만드니까 비교적으로 쉽고, HTML, CSS, JS 영역이 분리되어 있어 이해하기도 쉬움
장단점 정리
- 러닝 커브: 뷰 < 리액트
- 뷰는 싱글 파일 컴포넌트 구조로, 기존의 html, css, js로 나눠 개발하는 방식과 유사하여 서버개발자에게도 익숙하게 다가옴
- 리액트는 모든 것이 자바스크립트
- 생산성: 뷰 > 리액트
- 뷰는 자스 문법 정확히 몰라도 뷰에서 제공해주는 문법만 배우면 잘 동작할 수 있음
- 진입장벽: 뷰 < 리액트
- 속도(미세한 차이): 뷰 > 리액트
- 타입스크립트 결합도: 리액트 > 뷰
- 변화가 빠르고 혁신적: 리액트 > 뷰
- 자유도, 유연성: 리액트 > 뷰
결론
사용성, 생산성 - 뷰
트랜드, 범용성 - 리액트
누구에게 적합?
Vue
규모가 작고 가벼운 프로젝트를 빠르게 만들고 싶다.
속도 이슈에 매우 민감한 사이트이다.
자바스크립트 문법에 미숙하다.
회사에 퍼블리셔가 따로 존재한다.
기존 html css js 구조로 작성된 코드를 spa로 옮기고 싶다.
개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.
백엔드 개발자다.
React
프로젝트의 규모가 크다. 점점 더 확장 될 것이다.
자바스크립트 문법에 능숙하다.
컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 예정이다.
커스터마이징 및 자유도가 높은 개발 환경을 좋아한다.
타입스크립트를 사용할 것이다.
넓은 커뮤니티 및 개발 인력시장의 혜택을 보고싶다.
