문제 정의
필자는 그동안 학교에서나 동아리에서나 혼자 프로젝트를 진행하면서 React를 이용하여 프론트엔드 개발을 해왔다. 하지만 현재 기업 실무에서는 Vue를 사용하고 있기 때문에 과제를 진행하거나 자습을 통해 Vue를 익힌뒤 실무에 뛰어든지 2달이 조금 넘은 상태다. 그동안 Vue를 사용하면서 React와 어떤점이 다른지, 둘의 장단점이 무엇인지를 파악하면서 두 프레임워크에 대해 정리할 필요가 있다고 생각하여 이 포스트를 작성한다.
시리즈 첫번째 글은 두 기술의 전체적인 부분을 비교해보고, 두번째 글은 기술의 세부적인 기능 등을 비교해 볼 예정이다.
React
먼저 React에 대해서 홈페이지의 정의를 통해 간단하게 정리해보겠다.
React란, Facebook에서 개발하고 유지 관리하는 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 주로 사용된다. 리액트는 컴포넌트 기반 아키텍처를 채택하여, 재사용 가능한 UI 컴포넌트를 만들고 관리하는 데 강점을 가지고 있다.
주요 특징
-
컴포넌트 기반: 리액트는 UI를 독립적인 컴포넌트로 나누어 구성한다(컴포넌트 기반 아키텍처). 각 컴포넌트는 상태(state)와 속성(props)을 가지고 있으며, 이를 통해 UI를 효율적으로 관리하고 재사용할 수 있다.
-
가상 DOM: 리액트는 실제 DOM 대신 가상 DOM을 사용하여 성능을 개선한다. 상태가 변경될 때마다 가상 DOM에서 변경 사항을 계산한 후(Diffing), 실제 DOM에 최소한의 업데이트를 적용(reconciliation)하여 렌더링 성능을 최적화한다.
-
단방향 데이터 흐름: 리액트는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 흐르는 단방향 데이터 흐름을 따른다. 이는 데이터의 흐름을 명확하게 하고, 디버깅과 유지보수를 용이하게 한다.
-
JSX: 리액트는 JSX(JavaScript XML)라는 문법을 사용하여 HTML과 JavaScript를 혼합할 수 있다. JSX를 사용하면 UI를 선언적으로 작성할 수 있어 가독성이 높아진다.
-
상태 관리: 리액트는 기본적으로 상태를 관리하는 기능을 제공하지만, 복잡한 상태 관리를 위해 Redux, MobX 등의 외부 라이브러리를 사용한다.
Vue
Vue.js는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크다. 이는 표준 HTML, CSS, 및 JavaScript 위에 구축되며, 선언적이고 컴포넌트 기반의 프로그래밍 모델을 제공하여 어떠한 복잡성의 사용자 인터페이스도 효율적으로 개발할 수 있게 도와준다.
주요 특징
-
컴포넌트 기반: Vue는 UI를 독립적인 컴포넌트로 나누어 구성한다. 각 컴포넌트는 자신의 템플릿(template), 로직(script), 스타일(style)을 가지고 있어 재사용성과 유지보수성을 높여준다.
-
반응성(Reactivity): Vue는 데이터가 변경될 때 UI를 자동으로 업데이트하는 반응성 시스템을 제공한다. 이를 통해 개발자는 상태 변화에 따른 UI 업데이트를 쉽게 관리할 수 있다.
-
가상 DOM: Vue는 실제 DOM 대신 가상 DOM을 사용하여 성능을 최적화한다. 데이터가 변경될 때 가상 DOM에서 변경 사항을 계산한 후, 실제 DOM에 최소한의 업데이트를 적용한다.
-
유연한 구조: Vue는 필요한 만큼의 기능을 추가하여 사용할 수 있는 유연한 구조를 가지고 있다. 라이브러리와 플러그인을 통해 기능을 확장할 수 있다.
-
템플릿 문법: Vue는 HTML 기반의 템플릿 문법을 사용하여, 데이터 바인딩과 디렉티브를 통해 쉽게 UI를 구성할 수 있다.
React와 Vue 비교
프론트엔드 기술 점유율
출처: https://2022.stateofjs.com/ko-KR/libraries/front-end-frameworks
위의 사진은 stateofjs 사이트에서 확인할 수 있는 프론트엔드 프레임워크와 라이브러리에 관한 통계자료이다. 기술에 관하여 시간에 따른 만족도, 관심도, 사용량, 인지도 비율과 순위를 확인할 수 있다.
사용량은 React가 압도적으로 높으며, 뒤를 이어 Angular가 2위, Vue.js가 3위임을 확인할 수 있다. 만족도(다시 사용할 예정 / (다시 사용할 예정 + 다시 사용 안함)) 또한 React가 83%, 바로 뒤를 이어 Vue.js가 77.4%로 높은 수치를 보였다.
React, Vue 간단 표 정리
| Feature | Vue.js | React.js |
|---|---|---|
| Framework Architecture | Component-based | Component-based |
| Language | JavaScript | JavaScript |
| Learning Curve | Relatively easy to learn and understand | Steeper learning curve for beginners |
| Popularity | Growing in popularity | Widely used, with a large and active community |
| Performance | Fast and efficient rendering, good performance | Good performance, but can be slower than Vue.js |
| Scalability | Scalable for small to medium-sized applications | Scalable for large applications |
| Data binding | Two-way data binding | One-way data binding |
| Templating | HTML-based templates | JSX-based templates |
| State Management | Vuex ,Pinia | Redux, Recoil |
| Routing | Vue Router | React Router |
| Developer tools | Vue CLI, Vue DevTools, Vite | Create React App, React DevTools |
| Integration with libraries | Has a growing ecosystem of plugins and libraries | Has a vast ecosystem of plugins and libraries |
| Mobile Development | Native mobile development is possible with NativeScript and Weex | Native mobile development is possible with React Native |
| Community Support | Has a growing and active community | Has a large and active community |
| Server-side Rendering | Server-side rendering is possible with Nuxt.js | Server-side rendering is possible with Next.js |
출처: https://medium.com/@zero86/%EB%B2%88%EC%97%AD-react-js-vs-vue-js-in-2023-5118ae2e1454
장단점
React
장점
-
재사용성: 컴포넌트를 재사용할 수 있어 코드의 중복을 줄이고 유지보수를 용이하게 한다.
-
성능: 가상 DOM을 사용하여 UI 업데이트 성능을 최적화한다.(가상 DOM 관련 성능 측면에서는 Vue가 더 높다고 한다)
-
대규모 커뮤니티: 전 세계적으로 많은 개발자들이 사용하고 있어, 다양한 자료와 지원을 받을 수 있다. + 상대적으로 수많은 기업들이 React를 사용하고 있어, 취업 시장에서 유리하다.(Vue에 비해 취업시장의 규모가 7배 더 크다는 통계가 존재)
-
생태계: 다양한 라이브러리와 도구가 존재하여, 필요에 따라 쉽게 통합할 수 있다. 예를 들어, React Router(라우팅), Redux(상태 관리) (그러나 이 부분은 React가 프레임워크가 아니라 라이브러리이기 때문에 React 만으로는 지원하는 기능이 적다는 단점이기도 하다.)
단점
-
학습 곡선: JSX 문법과 리액트의 개념들이 처음 접하는 개발자에게는 다소 어려울 수 있다.(배워야 할 것들이 많음)
-
빠른 변화: 리액트 생태계는 빠르게 변화하고 있어, 새로운 도구나 라이브러리를 지속적으로 학습해야 할 필요가 있다.
-
리액트는 UI 라이브러리: React는 UI 라이브러리일 뿐이므로, 라우팅이나 상태 관리와 같은 다른 기능은 추가 라이브러리를 통해 관리해야 한다. (React-router-dom, Redux, Recoil 등 별도의 라이브러리 및 학습이 필요)
Vue
장점
-
쉬운 학습 곡선: Vue는 간결하고 직관적인 문법을 제공하여, JavaScript에 익숙한 개발자라면 쉽게 배울 수 있다.
-
Vue는 양방향 데이터 바인딩과 반응성 시스템은 애플리케이션의 상태 관리를 간편하게 해주며, UI와 모델 간의 동기화를 자동으로 처리한다
-
높은 유연성: Vue는 다양한 방식으로 사용될 수 있어, 간단한 프로젝트부터 대규모 애플리케이션까지 적합하다. 또한 Vue는 기존 프로젝트에 점진적으로 통합할 수 있어, 전체 프로젝트를 Vue로 전환하지 않고도 특정 부분에 적용할 수 있다.(점진적인 프레임워크)
-
가벼운 프레임워크: Vue는 파일 크기가 매우 작고, 성능 최적화가 잘 되어 있어 초기 로드 시간이 빠르며 리소스를 적게 사용한다.
단점
-
대규모 프로젝트에서의 복잡성: Vue는 작은 프로젝트에 적합하지만, 대규모 애플리케이션에서는 Vuex와 같은 상태 관리 도구를 사용해야 하며, 이로 인해 복잡성이 증가할 수 있습니다.
-
자유도 측면: 프레임워크이기 때문에 문법이나 기능이 정해져 있어 초보자들에게는 좋겠지만, 동시에 자유도가 떨어지기 때문에 숙련자 입장에서는 불편할 수도 있다.
-
생태계의 변화: Vue의 생태계는 빠르게 변화하고 있어, 새로운 기능이나 패턴을 지속적으로 학습해야 할 필요가 있다. (얼마전 Vue2 서비스를 중단하고 Vue3만 업데이트 중이다. 기능이나 패턴의 달라진 부분이 많음)
-
유명도: React와 Angular에 비해 상대적으로 덜 알려져 있지만, 최근에는 많은 기업에서 채택하고 있다.
참고자료
https://joong-sunny.github.io/react/react2/
https://sprint.codeit.kr/blog/2024%EC%97%90-%EA%B0%80%EC%9E%A5-%ED%95%AB%ED%95%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%88%9C%EC%9C%84%EB%8A%94
