UI 라이브러리 vs 프레임워크
라이브러리와 프레임워크의 차이
라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다.
프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있습니다.
라이브러리는 단순 활용가능한 도구들의 집합을 말하고,프레임워크는 뼈대나 기반구조를 뜻합니다.
리액트는 UI 라이브러리입니다. 라이브러리는 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용하는게 편리합니다. 또한, 전역 상태 관리, 라우팅, 빌드 시스템 등은 Redux, Mobx 등을 사용해야 합니다.
뷰는 자바스크립트 프로그레시브 프레임워크입니다.
코드 형태
리액트는 JSX(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현합니다.
반면 뷰는 HTML, JS, CSS 코드 영역을 분리해서 작성합니다. 예를 들어 하나의 .vue 파일을 만들 때에도 패턴이 정해져 있습니다. <template>에는 HTML 작성 영역, <script> 안에는 JavaScript, <style> 안에는 CSS를 작성합니다. 이러한 패턴 덕분에 코드 가시성 및 생산성 부분에서는 뷰가 리액트보다 좋습니다.
TypeScript
타입 스크립트로 대표되는 자바스크립트의 정적 표현이 리액트를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉽습니다. 함수형 프로그래밍을 하기 위해선 순수 함수 및 매개변수의 데이터 타입을 고정하는 작업이 필수적인데 ts를 사용해 쉽게 처리할 수 있을 뿐 아니라 리액트는 모든 코드를 ts로 구현하는게 뷰보다 쉽기 때문입니다.
뷰도 ts를 지원하지만, ts를 사용하기 위해선 많은 부분에서 ts용 모듈을 사용해야 하고, 특히 뷰에서 이를 사용하기 위해선 ts와 ts 모듈들을 위한 코드 변경에 노력이 필요합니다.
진입 장벽
리액트의 진입장벽이 더 높습니다. 리액트는 mobX, 리덕스, 리코일 등의 상태관리 트랜드의 변화도 알아야할 뿐 아니라 리덕스의 경우 수 많은 미들웨어에 대한 이해도 중요합니다.
뷰는 상대적으로 낮은 진입장벽을 가집니다. 페이지와 컴포넌트, 라우팅 등을 이미 주어진 코드 프리셋에서 조금씩 수정하면서 만들고, HTML, JS, CSS 영역이 분리되어 있어서 이해하기 쉽습니다.
자유도
조건에 따라 button을 보였다가 안보였다가 해야 하는 상황에서 리액트는 개발자가 직접 JavaScript 문법을 사용해서 쓰고 싶은대로 재량껏 구현하지만, 뷰에서는 뷰에서 제공해주는 v-if 한가지 방법만을 사용해야 합니다.
