Vue

• 프레임워크
• 상대적으로 낮은 러닝커브
• 생산성이 뛰어남
• 친절한 공식문서
• 가볍고 빠른 개발에 추천
• template, script, style로 구성된 Single File Component
• typescript 지원이 완벽하지 않다
• 사용성과 생산성이 높다
• 양방향 데이터플로우(단방향도 가능)
• virtual DOM

장점

• 점진적인 프레임워크 : 라이브러리 기능 + 프레임워크 기능
  - 라이브러리 기능 : 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
  - 프레임워크 기능 : 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

• Template과 Render Function을 모두 사용할 수 있는 옵션

• 간편한 Syntax와 프로젝트 설정

• 빠른 렌더링과 더 작은 용량
  두 라이브러리가 어떻게 application data(state)를 처리하는지 살펴보면:

  ```
  this.setState({
  message:this.state.message.split('').reverse().join('')
  });
  ```

  React에서 state는 불변의 속성을 갖는다.
  그래서 직접적으로 변경 X.
  만약, 상태를 변경하고 싶다면 위 처럼 setState()를 사용해야한다.
  현재와 이전 상태를 비교해 언제, 어떻게 다시 DOM을 렌더링 할 지 결정하기 때문에 불변하는 속성이 필요하다.

반대로, Vue에서 data는 변경될 수 있다.:

this.message = this.message.split('').reverse().join('');

state에 새로운 객체를 추가했을 때, Vue가 해당 객체의 모든 속성을 확인하고나서 getter, setter로 변환한다.
Vue의 reacivity system이 모든 상태를 모니터링하여 변경이 일어날 때마다 자동으로 DOM을 다시 렌더링한다.

더 인상적인 부분은 Vue에서 state를 간단하게 변경할 수 있을 뿐만 아니라, Vue의 렌더링 시스템이 React보다 빠르고 더 효율적인 부분이다.

React

• 라이브러리
• 전역 상태 관리, 라우팅, 빌드 시스템 지원 안함 (라이브러리)
• 뷰보다 세세하게 컴포넌트화하여 재사용성 높음
• typescript 지원
• 트랜드와 범용성이 높다
• 선언형
  - 선언형과 명령형
• 단방향 데이터플로우
  - 데이터가 UI로 흐르는 구조. 데이터가 변했을때 UI가 업데이트 된다.
• virtual DOM

장점

• Component를 사용해서 효율적으로 재사용이 가능하고 유지보수가 용이
  - Component는 UI를 구성하는 개별적은 뷰 단위로 전체 앱은 각 Component들이 결합해서 만들어지게 되는데 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다. React의 목표는 성능보다는 유지 가능한 앱을 만드는 것.
• 생태계가 넓고 다양한 라이브러리 사용 가능
  - Vue에 비해 사용자가 많고 facebook에서 만든 만큼 커뮤니티와 자료가 방대함
• 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 혼용 가능
  - 다른 프레임워크나 라이브러리와 함께 사용할 수 있고 이미 개발된 서비스에서도 일정 부분에서만 선택적으로 적용이 가능하여 단계적으로 React로의 변경이 가능함
• virtual DOM을 활용하여 빠른 렌더링이 가능하다
  - DOM은 브라우저가 화면을 그리기 위한 정보를 담고있는 문서 객체이다. JQuery처럼 실제 DOM을 변경할 경우, 변경할 부분이 일부분이더라도 DOM 전체를 다시 렌더링 해야하고, 이는 성능 저하로 직결 된다는 단점이 있다. React는 렌더링 시 virtual DOM, 즉 가상 DOM을 먼저 만든다. 그 후 실제 DOM과 비교를 하여 변경이 있는 부분(하위 컴포넌트)만 대체를 하기 때문에 리소스 낭비를 줄일 수 있다.
  - virtual DOM 브라우저 렌더링
• 단방향 데이터 바인딩을 통함 디버깅 용이(다른 라이브러리에 비해 안정성이 높음)
  - react 내에서의 데이터의 흐름은 부모(parent)에서 자식(child)으로 단방향적이다. 그렇기 때문에 디버깅이 용이하며 다른 라이브러리에 비해 안전성이 높다.
• 리액트 네이티브를 활용하여 앱 개발 가능
  - 리액트 네이티브는 네이티브 모바일 앱을 만들기 위한 프레임워크로서 리액트를 기반으로 개발되었다. 리액트 라이브러리가 웹 개발자나 하이브리드 앱 개발자에게 유용하고 관심을 끌게 하는 기술이라면 리액트 네이티브는 모바일 개발자들이 몹시 주목할 기술이다.
  

단점

• 프레임워크의 MVC 패턴과 비교하였을때 V(view)만을 관리한다.
  - View 부분만을 관리하기 때문에 다른 부분은 써드파트 라이브러리(third party library)를 이용하거나 직접 구현해야한다.
• 진입장벽이 낮지 않다
• 단점(모듈)

React를 선택해야 하는 경우

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

Vue를 선택해야 하는 경우

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

필요에 따른 선택

Vue.js와 React는 모두 대화 형 사용자 인터페이스를 구축하기위한 훌륭한 도구이다. 다음 프로젝트에 더 적합한 것을 선택하려면 특정 사용 사례, 비즈니스 요구 사항, 환경, 개발자 가용성, 예산 및 작업중인 기간을 포함하여 여러 요소를 고려해야한다.

Vue는 가볍고 배우기 쉽고 작성하기 쉽다. 친숙한 템플릿 구문과 구성 요소 사용으로 인해 기존 프로젝트를 Vue로 통합하거나 마이그레이션하는 것이 더 빠르고 원활하다. 이러한 이유로 Vue.js는 스타트 업에 적합하지만 대규모 애플리케이션에서도 잘 사용될 수 있다.

Vue에는 상태 관리, 라우팅 또는 서버 측 렌더링을위한 공식 패키지가 있으며,이 패키지는 최신 지원과 함께 시스템 전체에서 동기화를 보장한다. Vue CLI 4 및 Vue UI를 사용하면 프로젝트를 설정하고 배포를 준비하는 것이 매우 빠르다. 이를 통해 빠르고 효율적인 방식으로 MVP를 구축 할 수 있다.

반면 React는 JS 분야의 베테랑이다. 기업 지원, 대규모 커뮤니티 및 더 큰 에코 시스템을 갖춘 React는 복잡한 엔터프라이즈 급 애플리케이션 을 구축하는 데 적합하다. 또한 숙련 된 React 개발자로 인해 취업 시장이 호황을 누리고 있으므로 전문가가 부족하지 않을 것이다. 성숙도와 커뮤니티이기 때문에 도움을 요청하고 신속하고 상세한 답변을 얻는 것이 어느 정도 보장된다.

React는 oven (오븐) 이다. 케이크를 굽는 과정에서 분명히 추가적인 tools가 필요하지만 이것은 필요한 것을 만드는 과정에서 tools를 선택하는 유연함을 줄 수 있다. 내가 기술적인 회사에서 능력있는 몇몇 senior 개발자들과 함께 일을 하고 있다면 React는 좋은 선택이다.

Vue는 쉽고 효율적인 방법으로 요리를 정말 빠르게 만들 수 있다. 만약 startup 회사에서 새로 생긴 팀에서 엄격한 deadline을 가지고 있다면 나는 VueJS를 좋아할 것이다.