본문 바로가기

A.개발관련자료

[Vue vs React] 프론트엔드 프레임워크, 라이브러리 비교

1. 프레임워크와 라이브러리의 차이점

결정적인 차이점은 애플리케이션 코드를 틀로써 사용하느냐, 아니면 라이브러리를 직접 호출하여 능동적인 코드 흐름을 만드느냐에 따라 다른 것 같다. 네이밍에서도 드러나듯이 프레임워크는 골격이라는 의미를 가지고 있으며, 보통 메모리관리, 이벤트루프, db연동 등과 같이 필수적으로 들어가야 하는 코드들의 집합을 묶어놓은 구조를 제공한다. 따라서 사용자는 해당 프레임워크 내에서 메서드를 구현할수 있다. 반대로 라이브러리의 경우 특정 기능을 모은 코드들을 자유자재로 불러내어 조금더 능동적인 코드의 흐름을 짤 수가 있다.

 

2.React.js vs Vue.js

1)React.js란??

ReactJS는 재사용이 가능한 사용자 정의 함수 및 구성요소를 만드는데 유용하며, 웹 페이지 내의 빠른 렌더링을 가져올수 있다. 비교적 vue보다 러닝 커브가 높지만 확장성이 높고 대규모 어플리케이션에 적합하며 javascript 라이브러리가 풍부하다.

웹 페이지 내의 효율성이 높고 사용자 경험 및 로딩속도가 빠른 편이다. 단점이라 하면, view에만 집중 된 기능이 많고, 지속적인 업데이트가 필요하다는 것이다.

 

2)View.js란?

Reactjs보다 낮은 학습 곡선으로(1주일~한달) 접근이 용이하며, 기본적인 마이그레이션(운영환경 변경)이 가능하다. Reactjs보다 단순하고 구축이 빨리 진행되어야하는 프로젝트에 적합하며 업데이트가 기본적으로 수행된다. 단점이라 하면, 커뮤니티의 정보성이 떨어지며, 규모가 작다. 과도한 유연성을 제공하여 코드의 불규칙성이나 오류를 초래하여 스파게티 코드를 생성할 수 있다. 

 

3)Vue 와 React의 공통점

두 가지 모두 javascript 및 typescript 로 구성되며, DOM 기반 아키텍처 및 props를 사용한다는 공통점이 있다.

더불어 vue와 reactsms 프로그레시브 웹 앱(pwa)를 지원하며, 반응형 구성 가능한 뷰를 제공, 라우팅 및 상태관리를 위한 라이브러리를 추가할 수 있다.

 

4)Vue 와 React의 차이점

결론적으로 말하자면 Vue는 프레임워크, React는 라이브러리 성향을 띄는 프론트엔드 개발 도구이다. 

결정적인 차이점은 vue.js는 데이터 객체를 생성하고, react.js는 상태 객체를 생성한다는 것이다. 상대적으로 vue.js는  react.js에 비해 

학습 커브가 낮아 배우기 쉽고 사용하기 쉬운 경량 프레임워크이다. 

react와 view는 사용범위나 용도에 따라 선택이 갈린다. view.js의 경우 대화형 다중 페이지의 앱 (핵심 라이브러리를 쉽게 페이지에 가져 올수 있게 사용)을 만들때 유용하며, react의 경우 확장성이 높은 경량 다중페이지 앱에 적합하다. 

현재 react.js는 facebook의 지원으로 상승세를 타고 있지만, vue의 사용자수도 급수적으로 늘고 있다.

 

5)모바일 앱 개발 및 네이티브 사용가능 여부

React의 경우 하이브리드 모바일 앱 프레임워크인 React Native로 네이티브 모바일 앱을 만들 수 있다. React Native는 React와 유사한 구성 요소이기 때문에 안드로이드 및 ios에서 코드 재사용이 쉽다.

Vue는 모바일 앱 개발을 위한 전용 플랫폼이 따로 없지만, Vue 구성 요소를 사용하여 모바일 ui 프레임워크인 weex를 사용 가능하지만, 신뢰성 및 커뮤니티 확장성이 떨어지는 점이 있다.