React와 Vue

나는 처음 프론트엔드를 공부할 때, 당시 vue, angular 보다 react의 생태계가 더 넓고 커뮤니티가 활성화 되어있기 때문에 react를 선택했다. vue의 점유율은 꾸준히 오르고 있는데 실제로 취업 공고에도 vue가 많이 보이고 카카오에서도 react와 vue, angular를 함께 사용한다.

2023 vue의 점유율이 치솟은 것은 오류라는 것이 학계의 정설,,

 

react와 vue의 github issue나 star수만 보면 사실 차이가 많이 나긴 한다.

react - issue 1.2k, start 220k

vue - issue 691, start 43.6k

 

그렇다면 react와 vue의 장단점, 공통점과 차이점을 알아보자.

---

React

React는 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다.

 

- SPA(Single Page Application)이나 모바일 애플리케이션 개발에 사용될 수 있다.

- 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가로 라이브러리를 사용해야 한다.

 

장점

•컴포넌트기반 프레임워크이며 가상 DOM 렌더링 방식을 사용한다. 

•단방향 데이터 바인딩으로 안정성을 보장한다.

•React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

•React-Native 를 통해 네이티브 모바일 애플리케이션 개발이 가능하다.

 

단점

•앱의 규모가 커지면 속도가 느려진다.

•다른 프론트엔드 기술스택에 비해 가파른 학습곡선을 가지고 있으며, 이는 일부 개발자들에게 장벽이 될 수 있다.

•View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 javascript에 대한 지식이 필요하다.

•데이터 모델링, 라이팅, Ajax 등 기능 지원이 되지 않는다.

 

---

Vue

Vue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 자바스크립트 프레임워크이다.

 

- 기존 프로젝트의 일부에 점진적으로 도입할 수 있다.

- 고성능의 싱글 페이지 애플리케이션(SPA)을 구축할 수 있다.

 

장점

•컴포넌트기반 프레임워크이며 가상 DOM 렌더링 방식을 사용한다. 

•양방향 데이터 바인딩 방식

•HTML, CSS, JS만 알고 있어도 사용이 가능하여 배우기 쉽다

단점

•테스트가 어렵고 재구조화가 쉽지 않다.

•모바일 지원이 부족하다.

•커뮤니티 등의 자료가 React에 비해 많지 않다.

 

---

공통점

•컴포넌트기반 프레임워크로 가상 DOM 랜더링 방식을 사용한다.

•React는 Next를 통해, Vue는 Nuxt를 통해 Serverside rendering을 구현할 수 있다.

•코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리(react-router, react-router-dom, react-router-redux 등)가 있다.

차이점

•React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.

•React는 JSX(JavaScript XML) 형태로 코드를 작성하며 JavaScript만을 사용해 UI 로직과 DOM을 구현한다.

•Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.

•Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.

 

ex)

 

•React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.

    → 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.

 

ex) 

<input v-bind="textValue">
<script setup>
  const textValue = ref();
  textValue.value = "let's test vue!";
</script>

input 태그에 data를 사용자가 입력할 때, 실제로 textValue 의 값이 변경 되게 하려면

textValue = event.target.value 를 통해 이벤트 처리를 해줘야한다.

이렇게 단방향으로만 데이터가 흐르는 방식이 React에서 사용되는 단방향 데이터 바인딩이다.

 

그러나 vue에서는 v-model을 사용해 양방향 데이터 바인딩을 할 수 있다.

<input v-model="textValue" />

위와 같이 v-model을 사용하면 input 창에 사용자가 입력한 값이 textValue에 바인딩되어

사용자가 input을 변경하면 textValue값이 함께 변경되는 것을 볼 수 있다.

 

---

참고

https://github.com/facebook/react

https://github.com/vuejs/core

https://npmtrends.com/angular-vs-react-vs-vue

https://medium.com/@zero86/%EB%B2%88%EC%97%AD-react-js-vs-vue-js-in-2023-5118ae2e1454

https://velog.io/@falling_star3/Vue.js-%EC%96%91%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9v-model

https://codingapple.com/unit/why-use-vue-over-react/