React vs Vue

React와 Vue 사실상 프론트엔드에서 가장 많이 쓰이는 Framework이다.
양대산맥이라고 볼 수 있는데, 잡서칭을 하면서 다양한 회사들을 많이 찾아봤다. 프론트엔드Part에서는 정말 React, Vue를 어느 하나 우열을 가리기 힘들정도로 다양하게 사용하고 있는 것을 볼 수 있었다.

그러면 분명히 이 둘의 차이점은 존재할텐데, 어떤 차이점이 있길래 어느 한쪽으로 치우치지 않고 사용을 하고 있을까어느 한쪽으로 치우치지 않고 사용을 하고 있을까 궁금해진다.

현재 트렌드로 봤을 때 React가 3% 앞서지만 거의 차이가 없이 프론트엔드에서는 React, Vue 둘다 많이 쓰인다고 볼 수 있다.

하지만, 앞으로의 전망은 Vue가 조금 밝다고(?) 볼 수 있다.
이렇게 정말 우열을 가리기 힘든 2가지 Framework Vue, React 차이점을 알아보자.

공통점

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

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

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

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

• Server-side Rendering 지원

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

 *Server-side Rendering :  서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식. 
                           SR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다.

차이점

React

• 거대한 커뮤니티
  ->페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고, React 사용자가 많아 다양한 레퍼런스, 확장 라이브러리가 많다.

• JSX 기반 컴포넌트 구문
  -> 템플릿 방식으로 관리하는 Vue와는 달리, React는 JSX 코드로 컴포넌트를 작성하고 컴포넌트의 상태(State)를 변화시키지 않고 관리한다. 변화가 일어나면 실제 브라우저의 DOM에 새로운 것을 적용하는 것이 아니라, 자바스크립트로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트 한다.

• 단방향 데이터 바인딩을 지향해 관리하기 쉬운 애플리케이션을 만들 수 있다.

Vue

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

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

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

• Template 문법작성의 유연하다. (HTML, JS / JSX 모두 가능)

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

간단하게 두 Framework를 정리해보았다. React vs Vue!
결론은 상황이나 개발환경에 맞게 사용하면 된다는 결론이 나왔다.

Templates 형식으로 앱을 제작한다, 간단한것 그리고 "일단 동작"이 된다, 빠르고 경량의 앱을 제작하고 싶다.
=> 이러면 Vue를 사용한다.

큰 규모의 앱을 만든다, 더 큰 개발 생태계를 지향한다.
=> 이러면 React를 사용한다.

이게 내가 내린 결론이다.