728x90
반응형
안녕하세요!
이번 기사는 프론트엔드 관련 프레임워크 중 큰 비중을 갖는,
Vue VS. React 에 대한 내용입니다 !!
위의 그래프는 국내 4,034명의 개발자가 참여한 2023 프로그래머스 개발자 설문조사 리포트에 게시된 자료입니다.
보시다시피 React와 Vue.js 는 상위권에 속하는데 이 두 프레임워크에 대해 알려드리겠습니다.
Vue.js
Vue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 Open Source Progressive JavaScript Framework입니다. 통일된 문법과 접근 방식으로 협업과 코드의 일관성이 강조되어 가파른 학습 곡선으로 초보자들도 익히기 쉬운 편입니다. 또한 고성능의 Single Page Application을 구축하기에 쉽습니다.
장점
1. 양방향 데이터 바인딩을 이용하기 때문에 화면에 표시되는 값과 프레임워크 모델의 데이터 값이 동기화되어 자동으로 변경됩니다.
2. 컴포넌트 기반 프레임워크로 가상 DOM 렌더링 방식을 사용합니다. 그래서 화면 전체를 다시 그리지 않게 되어 유지보수와 재사용성이 높습니다.
3. HTML, CSS, JS만 알고 있어도 사용이 가능하고 배우기가 쉽습니다.
4. 명확한 코드 스타일로 원활한 협업이 가능하다.
단점
1. 테스트가 어렵고 재구조화가 쉬운 편이 아닙니다.
2. 모바일 지원이 부족합니다.
3. 커뮤니티 등의 자료가 React에 비해 적은 편입니다.
React
React는 JavaScript 라이브러리의 하나로, 사용자 인터페이스를 만들기 위해 사용됩니다. 모바일 애플리케이션 개발에 사용될 수도 있고, Vue.js와 마찬가지로 SPA 구축에 용이합니다.
장점
1. 가상 DOM을 사용해서 갱신되는 SPA의 리플로우와 리페인트를 최소화하기 때문에 성능을 최적화시킵니다.
2. 컴포넌트 기반의 아키텍처를 가지고 있어서 재사용 가능한 컴포넌트는 생산성과 유지보수를 용이하게 합니다.
3. 단방향 데이터 바인딩으로 안정성이 보장됩니다.
4. React 공식문서 가이드와 방대한 커뮤니티 및 자료를 통해 쉽게 접할 수 있습니다.
단점
1. 앱의 규모가 커지게 되면 속도가 느려질 수 있습니다.
2. View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 JavaScript에 대한 깊은 이해와 지식이 필요합니다.
3. 데이터 모델링, AJAX 등 기능 지원이 되지 않습니다.
정리
Vue 와 React 의 공통점
1. 가상 DOM을 이용한다.
2. 조합 가능한 컴포넌트를 제공한다.
3. Core Library에만 집중하고 있으며 라우팅 및 전역 상태를 관리하는 Companion Library 가 존재한다.
Vue 와 React 의 차이점
1. Vue는 양방향 데이터 바인딩, React는 단방향 데이터 바인딩 방식을 이용한다.
2. React는 JSX 형태로 코드를 작성하고 JavaScript만을 사용해서 UI Logic과 DOM을 구현한다.
3. Vue의 가상 DOM 구현이 React 보다 빠르며 Overhead가 적게 발생한다.
4. React에서 모든 컴포넌트는 JSX의 툴을 사용하기 때문에 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.
5. Vue는 템플릿을 사용하기 때문에 쉽고 빠르게 제작이 가능하며 학습에 대한 진입 장벽이 낮다.
세 줄 요약
1. Vue는 제공되는 HTML 기반의 템플릿이 있어서 배우기 쉽고, 프로젝트를 빠르게 만들 수 있다. 개발자 간 코드가 통일성이 있으며 소규모 프로젝트에 용이하다.
2. React는 자유도가 높고 확장성이 좋지만, JavaScript 문법에 대해 이해도가 높아야 한다. 방대한 자료가 구글링을 통해 쉽게 접할 수 있으며 대규모 프로젝트에 용이하다.
3. 현재 역량과 프로젝트 규모에 맞게 선택해서 배우고 사용하면 좋을 것 같다.
728x90
반응형
