React vs Vue

React 와 VUE 는 프런트엔드에서 가장많이 사용하고 있는 Framework입니다.

둘의 차이점은 무엇이며 어느 한쪽으로 치우치지 않고 사용을하고 있는 이유는 무엇일까

공통점

React와 Vue는 둘다 Framework로서 프론트엔드에서 사용되는 만큼 공통점이 있을 것이다.

• Opensource이며, Frontend-user Interfaces 개발에 사용되고있다

• Virtual DOM으로 빠른 렌더링 보장 -> DOM 변화를 최소화 시켜준다.

• 반응성의 컴포넌트 기반 구조 -> 웹 UI를 작은 컴포넌트 단위로 구성한다.
  재사용할 수 있고, 컴포넌트 캡슐화와 확장이 가능해 개발이 유연해지는 장점이 있다.

• Server-side Rendering 지원

• Router, Bundler, State management와 결합이 쉬움

차이점

React

• 커뮤니티가 매우크다

  페이스북이 관리를 하고있으며 전세계적으로도 사용자가 매우 많아 레퍼런스, 확장 라이브러리가 매우 많다

• JSX 기반 컴포넌트 구문

  템플릿방식으로 관리하는 Vue와는 달리 React는 JSX코드로 컴포넌트를 작성하며 상태를 변화시키지않고 관리한다. 변화가 이루어지면 실제 브라우저의 DOM에 새로운것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링하고 기존의 DOM과비교하여 변화가 일어난 곳만 업데이트 한다.
• 단방향 데이터 바인딩을 지향해 관리하기 쉬운 애플리케이션을 만들수있다

Vue

• 단일파일 컴포넌트

  Vue는 단일 파일 컴포넌트 기반의 프레임워크이다. 웹의 뷰를 구성하는 요소인 HTML,CSS,JS코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식이다. 이러한 관리 방식은 적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업을 수월하게 한다는 장점이 있다.

• HTML기반 템플릿 구문

  Vue는 개발한 프런트엔드 파일을 사용자가 볼수있도록 브라우저 화면에 렌더링하는 과정에 템플릿문법을 사용한다 이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 배우기 쉽다는 특징이 있다.

• 단방향/양방향 데이터 바인딩 제공

• 빠른 렌더링과 더 작은 용량으로 사용가능하다.