React 와 Vue의 차이

IT/FrontEnd

by 쿠키안젤로 2024. 3. 12. 10:00

1. React 와 Vue 의 차이

	React	VueJS
설계	React는 Facebook에서 개발한 라이브러리로, 컴포넌트 기반 아키텍처에 중점을 둠. 단방향 데이터 흐름을 채택하며, 가상 DOM을 사용하여 성능을 최적화	Vue.js는 Evan You에 의해 만들어진 라이브러리로, 간단하고 유연한 설계에 중점을 두고 있음. 양방향 데이터 바인딩을 제공하며, 가상 DOM과 함께 사용되지만 React보다는 좀 더 직관적인 API를 가지고 있음
양방향 데이터 바인딩	React는 단방향 데이터 바인딩을 사용. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되며, 자식에서는 부모에게 데이터를 전달할 수 있음.	Vue.js는 양방향 데이터 바인딩을 지원. 이는 모델과 뷰 간의 동기화를 쉽게 만들어주어 개발자가 상태를 업데이트할 때 뷰가 자동으로 갱신.
API 및 문법	JSX(JavaScript XML) 문법을 사용하여 JavaScript 코드 안에 마크업을 작성. JavaScript와 HTML이 섞여있는 형태로 코드를 작성하게 됨	Vue.js는 템플릿 문법을 사용하여 간단하게 뷰를 정의. HTML 기반의 템플릿을 사용하며, 디렉티브를 통해 뷰와 모델 간의 바인딩을 설정할 수 있음.
커뮤니티 및 생태계	React는 페이스북과 커뮤니티에 의해 지원되고 있어 큰 생태계를 가지고 있음. 많은 라이브러리 및 도구들이 React에 특화되어 개발되어 있음.	Vue.js도 활발한 커뮤니티를 가지고 있지만 React보다는 상대적으로 작은 규모임. 그러나 빠르게 성장하고 있고, 사용자 친화적인 문법과 간결한 API로 많은 개발자들에게 인기를 얻고 있음
유연성	React는 라이브러리에 불과하며, 상태 관리나 라우팅과 같은 기능은 개발자가 선택한 라이브러리나 프레임워크를 사용하여 구현해야 함	Vue.js는 프레임워크로서 필요한 상태 관리 및 라우팅과 같은 기능을 내장하고 있음. 이는 초기 설정이나 학습 곡선을 낮추어주어 개발자에게 더 많은 유연성을 제공함.

2. NPM 방식와 CDN 방식의 차이

	장점	단점
CDN	빠른 시작: CDN을 통해 Vue.js, react 와 관련 라이브러리를 가져와 사용할 때, 초기 설정 없이 쉽게 시작할 수 있다 간편성: 프로젝트 설정이 필요 없으며, 외부 서비스로부터 리소스를 불러오므로 프로젝트 용량이 작음 캐싱과 성능: CDN은 전 세계에 분산된 서버를 통해 리소스를 제공하여 빠른 로딩 속도와 캐싱 기능을 제공할 수 있음	네트워크 의존성: CDN에서 리소스를 불러오기 때문에, 사용자의 네트워크 상태에 따라 로딩 시간이 달라질 수 있음 버전 관리와 안정성: CDN에서 제공되는 버전이 항상 최신이 아니며, 버전 관리와 안정성 관련 문제가 발생할 수 있음
NPM	모듈화 및 의존성 관리: npm을 통해 Vue.js , react 및 관련 라이브러리를 프로젝트에 설치하고, 모듈화하여 관리할 수 있음 버전 관리: 원하는 버전을 선택하여 설치하고, 의존성 버전 간 충돌을 방지할 수 있음 빌드 도구와의 통합: Webpack, Parcel 등 빌드 도구와 함께 사용하여 코드 번들링, 모듈 로딩, 최적화 등을 수행할 수 있음 학습 곡선: 초기 설정 및 의존성 관리에 대한 학습이 필요하지만, 장기적으로 프로젝트 구성과 유지보수에 용이함	설정 및 학습 비용: 초기 설정 및 npm을 사용하는 방법을 익히는 데 시간과 비용이 소요될 수 있음 프로젝트 용량: 모든 종속성을 로컬로 설치하므로 프로젝트 용량이 증가할 수 있음

NPM 방식은 프로젝트의 규모와 복잡성이 크고, 의존성 관리가 필요한 경우에 유용하며,

CDN 방식은 간단한 프로젝트 또는 빠른 시작이 필요한 경우에 적합함

프로젝트 생성

Vue.JS

--NPM 방식
$ vue create 프로젝트명

--CDN 방식
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

React

--NPM 방식
$ npx create-react-app 프로젝트명


--CDN 방식
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>