React vs Vue

김재민·2021년 12월 26일
0

Vue

뷰란?

"프로그레시브 프레임워크"의 창시자인 Evan You가 명명한 Vue 는 2014년 처음 공개되었습니다. 처음에 중국에서만 사용되었던 이 인기 있는 JavaScript 프레임워크 는 현재 전 세계적으로 사용되고 있으며 직관적인 사용자 인터페이스 및 단일 페이지 애플리케이션(SPA).

Vue 는 양방향 바인딩 을 제공하며 실제 DOM의 복사본인 가상 DOM을 사용합니다 . 그러나 사람들이 이 프레임워크에 끌리는 주된 이유는 점진적인 설계 입니다. 이를 통해 개발자는 이미 존재하는 프로젝트를 점진적으로 마이그레이션할 수 있습니다.

Vue는 오픈 소스 프로젝트로 , 지속적으로 발전하고 성장하는 커뮤니티에서 유지 관리합니다. BuzzFeed, Grammarly, Nintendo, Trustpilot 등과 같이 Vue와 관련된 큰 이름이 많이 있습니다.

React

2. 리액트란?

기술적으로 프레임워크가 아닌 React 는 웹 사이트 및 UI의 대화형 요소에 대한 웹 개발 에 사용되는 JavaScript 라이브러리 입니다 . Jordan Walke가 Facebook에서 일하면서 만든 React는 SPA와 모바일 앱을 만드는 데에도 사용한다.

이 JS 라이브러리는 더 복잡한 로직과 UI를 만드는 데 사용할 수 있는 격리된 코드 조각인 구성 요소를 사용하기 때문에 많은 유연성을 제공한다. 또한 가상 DOM을 사용하여 HTML 문서와 상호 작용하지만 모든 요소는 js 개체로 표시됩니다.

3. Vue vs React 성능

성능과 관련하여 Vue와 React 는 공통 요소를 공유하기 때문에 일반적으로 동일합니다. 그들은 증가 성능 속도와 낮은에 게으른 로딩을 사용 로딩 시간 , 그리고 가상 DOM의.

Vue와 React 는 모두 뛰어난 성능을 가지고 있으며 각각의 장점이 있습니다. 예를 들어, 메모리 할당과 시작 시간은 Vue가 조금 더 나은 반면 런타임에는 React가 주도합니다.

그럼에도 불구하고 둘 사이의 성능에 분명한 차이가 있는 상황이 있습니다. 예를 들어:

React 구성 요소 상태를 수정하면 하위 트리의 모든 구성 요소가 다시 렌더링됩니다.
Vue에서는 이러한 종속성을 추적하므로 불필요한 재렌더링이 방지됩니다.
둘 중 Vue는 1FPS의 React와 비교하여 높은 프레임 속도(10프레임/초)를 처리할 수 있습니다.

Vue vs React 상태 관리

상태라는 용어는 모든 UI 구성 요소 간에 공유되는 데이터를 나타냅니다. 당연히 시스템이 성장함에 따라 이를 관리하기가 점점 더 어려워지고 있습니다. 이러한 시나리오에서 React는 상태를 수정하는 단일 방법을 제공하여 디버깅 프로세스를 단순화합니다.

리덕스


Vue에서는 약간 다르게 관리됩니다. 객체의 data 속성을 사용하여 데이터를 수정할 수 있으므로 로컬 상태는 필요하지 않습니다. 그러나 더 큰 앱의 경우 상태 관리를 위한 외부 라이브러리가 필요합니다.

Vue에서는 약간 다르게 관리됩니다. 객체의 data 속성을 사용하여 데이터를 수정할 수 있으므로 로컬 상태는 필요하지 않습니다. 그러나 더 큰 앱의 경우 상태 관리를 위한 외부 라이브러리가 필요합니다.

뷰엑스

출처 https://dev.to/digitalyaops/vue-vs-react-what-to-choose-in-2021-3bc

여기까지, 리액트와 뷰와 관련된 내용들을 정리해보면

  • 러닝 커프는 뷰가 리액트에 비해 많이 낮은 편이다. 라는 의견이 많다.
    뷰를 사용해본적은 없지만 template style script 의 싱글 파일 컴포넌트 구조로 개발하는 방식이 기존의 html css js 로 나눠서 개발하던 방식과 유사하여 js 나 제이쿼리로 개발하던 개발자, 개발을 배워보려는 퍼블리셔, 서버에서 서버사이드 랜더링을 해봤던 서버개발자 들에게 익숙하게 다가올 수 있다.

  • 리액트는 모든것이 다 자바스크립이다. 매우 공감하는 말인것 같다. jsx를 사용하는 리액트는 html역할을 하는 코드도 js의 확장된 문법으로 사용한다. js안에서 쓰고 styled-components를 사용하면서도 css라는 느낌보다는 js를 작성하는 느낌이 더욱 강하다.

  • 뷰는 자바스크립트 문법을 정확히 몰라도 뷰에서 제공해주는 문법만 배우면 잘 동작하는것을 확인할 수 있다고 한다. 그래서 생산성이 빠른편이라고 하는데 아직 사용을 안해봐서 잘 모르겠다. 자바스크립트 문법을 잘 몰라도 된다라... 잘모르겠다...

  • 리액트의 진입장벽으로 redux, 라우팅 등이 있는 반면에 뷰가 진입장벽이 비교적 더 쉬운편이라고한다.

  • vue가 React 보다 속도 이슈에서는 vue가 더 빠르다고 한다.

  • typescript를 둘다 지원하지만 vue의 경우 많부분에서 ts용 모듈을 사용해야 하고, 뷰에서 사용하기 위해선 모듈을 위한 코드변경에 노력이 필요하다고 한다. 리액트 + typescript는 찰떡이라는 느낌이라고 한다면 뷰는 호완성에서도 약간 억지로 사용한다는 느낌이 강하게 든다고 한다.

결론

규모가 작고 가벼운 프로젝트를 빠르게 만들고 싶다.
속도 이슈에 매우 민감한 사이트이다.
자바스크립트 문법에 미숙하다.
회사에 퍼블리셔가 따로 존재한다.
기존 html css js 구조로 작성된 코드를 spa로 옮기고 싶다.
개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.

Vue


프로젝트의 규모가 크다. 점점 더 확장 될 것이다.
자바스크립트 문법에 능숙하다.
컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 예정이다.
커스터마이징 및 자유도가 높은 개발 환경을 좋아한다.
타입스크립트를 사용할 것이다.
넓은 커뮤니티 및 개발 인력시장의 혜택을 보고싶다.

React

출처 https://velog.io/@jmean12/React-vs-Vue

profile
Junior Front-end engineer

0개의 댓글