UI 라이브러리 vs 프레임워크

먼저 리액트는 UI 라이브러리이다.(https://reactjs.org/) 다들 아시겠지만 라이브러리는 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용하는 게 편리하다. 또한 리액트는 UI 라이브러리이기 때문에 리액트 자체만으론 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 리액트에서 앞선 기능들을 사용하려면 Redux, Mobx 등을 사용해야 한다.

반면 뷰는 자바스크립트 프레임워크이다.(https://vuejs.org/) 부분적인 사용이 불가능하고 프레임워크 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라 작성해주어야 한다. 그렇기 때문에 라이브러리와 달리 더 많은 기능을 디폴트로 제공해준다.

코드 형태의 차이

앞서 언급했듯 리액트와 뷰는 코드를 작성하는 방법이 다르다. 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하여 JavaScript 문법을 응용하기 때문에 JavaScript만으로 UI 로직과 DOM을 구현한다.

하지만 뷰는 HTML, JS, CSS 코드 영역을 분리해서 작성한다. ".vue " 파일을 만들 때에도 패턴이 존재한다. ". vue"에서 template에 HTML 작성 영역, script 안에는 JS, style 안에 CSS를 작성한다.

속도

아주 미세한 차이이기 때문에 사용자 경험 측면에서 느낄 정도의 차이는 아니지만, 실제로는 뷰가 리액트에 비해 조금 더 빠르다고 한다. 그렇기 때문에 속도 이슈에 민감한 코인 거래 사이트에서도 vue를 사용하는 경우가 있다고 한다.

React 단점
앱의 규모가 커지면 속도가 느려진다.

React와 Vue의 공통점

• 가상 DOM을 활용한다.
• 반응적이고 조합 가능한 컴포넌트를 제공한다.
• 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.

React와 Vue의 차이

• React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.
• 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현한다.
• Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.
• React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.
• Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.

리액트를 선택해야 하는 경우!

• 빠른 일정 안에 엔터프라이즈 수준의 가벼우면서도 현대적인 애플리케이션을 개발해야 할 때
• 웹사이트 개발 솔루션을 안전하게 보호할 수 있는 유연한 프레임워크가 필요할 때
• 크로스 플랫폼(cross-platform) 애플리케이션이나 싱글 페이지 애플리케이션(SPA)을 개발할 때
• 기존의 앱에서 기능성을 확장할 때
• 강력한 커뮤니티 지원과 솔루션이 필요할 때

뷰를 선택해야 하는 경우!

• 시장 진입 단계에서 필요한 프레임워크를 선택할 때
• 작고 가벼운 애플리케이션을 개발할 때
• 기존의 프로젝트에서 현대적이지만 제한된 리소스를 가진 프레임워크로 마이그레이션을 해야할 때
• 기업이 아니라 사용자 커뮤니티의 지원을 받는 프레임워크를 원할 때

출처
https://brunch.co.kr/@skykamja24/573
https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88
https://yozm.wishket.com/magazine/detail/198/