[웹개발] 자바스크립트 프레임워크 React와 Vue의 장점과 비교

React와 Vue 비교

리액트는 라이브러리이므로 비교적 자유도가 높은 반면 뷰는 프레임워크이므로 기능이 이미 다 정해져 있다

라이브러리 vs 프레임워크

• 라이브러리: 사용자가 필요할 때에 가져다 썼다가 뺐다가 할 수 있고 부분적으로 사용이 가능 (리액트)
• 프레임워크: 부분적 사용이 불가능하고 프레임 워크의 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작 (뷰)

예시

자유도가 높은 React, 정해진 방식대로만 하면 되는 Vue

리액트: 여러가지 방법중 마음에 드는것을 선택해 개발 (자유도가 높음)

뷰: 해당 기능을 개발하는 방법이 정해져있음 (프레임워크 문법을 따라야함)

1. 버튼을 화면에 안보이도록 만들기

리액트: && 연산자 방식, 삼항 연산자 방식

// 1. && 연산자 방식
<div>
  {isVisible && <button>조건에 따라 사라질 버튼</button>}
</div>

// 2. 삼항 연산자 방식
<div>
  {isVisible ? <button>조건에 따라 사라질 버튼</button> : null}
</div>

뷰: v-if 문법만 사용 가능

// v-if 문법 사용
<div>
  <button v-if="isVisible">조건에 따라 사라질 버튼</button>
</div>

2. 배열로 리스트를 랜더링

리액트: 배열의 메서드 map, forEach, for문 사용

const foods = ['apple', 'banana', 'peach', 'mango', 'fig']

// 1. 배열의 메서드 map 방식
<ul>foods.map((food, index) => <li key={index}>{food}</li>)</ul>

// 2. 배열의 메서드 forEach 방식
// * forEach를 사용하면 화면에 HTML요소를 리턴할 수 없다
foods.forEach((food) => console.log(food))

// 3. for문
const getList = () => {
  for (var i = 0; i < foods.length; i++) {
    document.write(`<li>${foods[i]}</li>`)
  }
}
<ul>
  {getList()}
</ul>

뷰: v-for 사용

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['apple', 'banana', 'peach', 'mango', 'fig'],
    };
  },
};
</script>

 

React와 Vue 비교

	리액트	뷰
카테고리	라이브러리: 자유도가 높음	프레임워크: 프레임워크 문법을 따라야함
코딩 스타일 통일	여러가지 방법중 마음에 드는것을 선택해 개발할 수 있으므로 코딩 스타일을 통일하기 위해서는 커뮤니케이션 비용이 든다	정해진 문법만 사용해야하므로 코딩 스타일을 통일하기가 용이하다
러닝 커브	모든것이 다 자바스크립트이므로 러닝 커브가 뷰에 비해 높다 (jsx라고 불리는 html 역할을 하는 코드도 js의 확장된 문법이고 css-in-js방식으로 스타일을 넣어줄경우에 js를 알아야한다)	html css js 로 나눠서 개발하던 방식과 유사한 스타일을 가지고 있는 뷰가 러닝커브가 낮다
속도 이슈		미세하게 뷰가 빠르다
타입스크립트	리액트에 결합이 더 잘된다

 

React, Vue 누구에게 잘 맞을까

출처: leehaeun0.log: React vs Vue 장단점 비교

Vue

• 규모가 작고 가벼운 프로젝트를 빠르게 만들고 싶다.
• 속도 이슈에 매우 민감한 사이트이다.
• 자바스크립트 문법에 미숙하다.
• 회사에 퍼블리셔가 따로 존재한다.
• 기존 html css js 구조로 작성된 코드를 SPA로 옮기고 싶다.
• 개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.
• 백엔드 개발자다.

React

• 프로젝트의 규모가 크다. 점점 더 확장 될 것이다.
• 자바스크립트 문법에 능숙하다.
• 컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 예정이다.
• 커스터마이징 및 자유도가 높은 개발 환경을 좋아한다.
• 타입스크립트를 사용할 것이다.
• 넓은 커뮤니티 및 개발 인력시장의 혜택을 보고싶다.

 

---

 

📘 참고

• leehaeun0.log: React vs Vue 장단점 비교
• 리치윈드 (RichWind): [개발] map과 foreach 혼동하지 마라