🟩 Vue.js

• 프레임워크
  • 라이브러리처럼 부분적 사용이 불가능
  • 프레임워크가 지원하는 형식/문법에 따라 작성해야함 (.vue 파일에 작성 / React는 .js나 .ts등 자유롭게 사용 가능)

Vue.js 의 장점

• 정해진 규칙과 문법이 있다
  • 협업 또는 인수인계 과정에서 다른 개발자가 작성 해놓은 코드를 더 빨리 이해할 수 있다
  • 가독성이 좋다 (<template> <script> <style>)
  • 러닝커브가 낮다
• 양방향 바인딩을 지원 (React는 단방향 바인딩)
  • 인스턴스 <-> template (v-model)

🟦 React.js

• 페이스북에서 만든 프론트엔드 JavaScript 라이브러리
  • 리액트 자체만으로는 라우팅, 빌드 세팅, 전역 관리 등을 지원하지 않는다
  • 원하는 라이브러리를 리액트에 넣을 수 있다 = 높은 자유도, 유연성
  • jsx문법 사용
    • html 역할을 하는 코드
      js의 확장된 문법이며 js 안에서 쓰는것

React 의 장점

• 높은 자율성
  • 코드를 다양한 형태로 작성 가능하다
    자바스크립트 문법을 응용해 개발자가 자유롭게 개발가능
• 컴포넌트 분리, 재사용 효율성이 좋다
  • 한 파일 안에 여러 컴포넌트 제작이 가능 (vue 에서는 컴포넌트 하나당 새로운 파일을 생성해야함 = 단일 파일 컴포넌트(Single File Component))
• typescript와 결합이 잘된다
  • vue는 2.x버전에서는 타입스크립트 지원이 완벽하지 않다

Vue.js vs React

공통점은?

• Reactive Component
  • 웹 UI를 작은 컴포넌트 단위로 구성
  • 컴포넌트는 다른 프로젝트에서도 재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있다.
• Virtual DOM으로 빠른 렌더링
  • 최종 결과만 실제 DOM에 전달
    따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내 실제 DOM에 전달하고
    실제 DOM은 그 변화를 1회로 인식해서 한 번의 렌더링 과정만 거치게 된다.
• 라우터, 번들러, state management와 결합이 쉽다
  • 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.

Vue.js 추천

• 규모가 작거나 가벼운 프로그램을 만들고 싶다면
• 속도에 대한 이슈에 매우 민감한 사이트
• 자바스크립트 문법에 미숙할때
• 개발자간의 코드 통일을 이루어 커뮤니케이션 비용을 줄이고 싶다면

React.js 추천

• 프로젝트의 규모가 크거나 점점 확장된다면
• 자바스크립트 문법을 사용하기에 능숙한 편
• 컴포넌트 자체가 작은 단위로 나뉘어 비슷한 UI 재사용을 하고 싶다면
• 타입스크립트를 이용해 개발할 것이면
• 웹 & 앱 개발을 하고 싶다면?! = React-Native
  • React-Native
    React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크