react와 vue 비교

이번에 사이드 프로젝트에서는 vue로 개발을 진행하고 있었기 때문에 react와 vue의 차이점을 경험적으로 익힐 수 있었다. 50% 이상 진행 중이었던 프로젝트의 중간에 들어갔기 때문에 프론트엔드에서는 이미 vue로 개발을 진행하고 있었고, 그렇기 때문에 vue로 개발 경험을 할 수 있었던 좋은 경험이었다.  

 

react와 vue 

 

공통점

• Web-App (SPA), 모바일 개발에 모두 사용된다.  

• 가상 DOM을 사용하는 아키텍처를 가지고 있어 reflow-repaint를 최소화한다.
  • 즉 DOM의 조작이 많이 발생하는 SPA에서 브라우저 연산의 양을 줄여 성능을 개선시킬 수 있다. 
• 컴포넌트 기반 아키텍쳐로 코드를 재구성하고 재사용할 수 있도록 해준다.
• 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다. 
  • 예) react와 react-router-dom / vue와 vue-outer

 

차이점

• React는 라이브러리, Vue는 프레임워크이다.
  • React는 JSX, Vue는 HTML 템플릿을 사용한다. 
    • 즉, React는 개발자가 JavaScript로 UI 로직과 DOM을 구현하기 때문에 확장성이 높다.
    • Vue는 템플릿으로 일반적인 HTML을 사용한다.
  • 다시 말해 Vue는 템플릿 기반이라 자유도가 크지 않다. 
    • 정해진 문법 안에서 구현할 수 밖에 없는 한계가 어떻게 보면 장점이기도 한다. 보통 답이 정해져 있다.
    • 하지만 vue 역시 react의 JSX, 함수형 컴포넌트 등의 웹앱 프로그래밍도 지원한다고 한다.
• Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.
  • 차이는 밀리세컨즈(ms) 단위로 미미하지만, 거래소 등에서는 vue를 많이 쓴다고 한다. 
• React는 단방향 데이터 바인딩, Vue는 양방향 데이터 바인딩을 지원한다. (아래는 Vue 예시)
  • React에서는 input 값이 변하면 onChange 이벤트 핸들러를 통해 데이터 값을 변경해주어야 한다. 
  • 단방향 데이터 바인딩의 경우 상태 변경에 대한 예측이 용이하여 디버깅 및 유지보수가 비교적 쉽다. 
  • 양방향 데이터 바인딩의 경우, 코드의 양은 줄지만 대규모 애플리케이션에서 데이터 흐름을 추적하기 쉽지 않다.

// v-model="message"는 입력 필드와 Vue 데이터 모델(message)을 양방향으로 바인딩한다. 
// 사용자가 입력 필드에 텍스트를 입력하면 Vue 데이터 모델의 값이 자동으로 업데이트되고, 
// 반대로 Vue 데이터 모델의 값이 변경되면 입력 필드에 표시되는 값도 자동으로 업데이트된다.

<template>
  <div>
    <input v-model="message" type="text">
    <p>입력된 값: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // Vue 데이터 모델
    };
  }
};
</script>

• React가 좀 더 생태계가 크고 레퍼런스 양이 많다.

 

vue를 써본 나의 경험

 

미미한... 장점

1. 일부 상황에서 코드 작성량이 React보다는 적은게 체감이 되었다.

• 양방향 데이터 바인딩으로 추가적인 코드를 작성하지 않아도 되는 등, 개발 당시에는 편하다고 느껴졌다.
  • 특히 자식 컴포넌트에서 부모 컴포넌트로 데이터 이동이 가능하다는 점이 정말 편했다. 
• 하지만 데이터의 흐름이 양쪽에서 이루어지기 때문에 대규모 프로젝트에서 이슈 발생 시, 디버깅이 쉽지 않을 것이라는 생각도 들었다. 
• 또한, template, script, style 요소가 무조건 한 파일 내 들어가야 하기 때문에 기존 React의 함수 컴포넌트와 비교해서 컴포넌트 재활용이 비교적 번거로웠다.

 

2. 확실히 vue는 프레임워크이기 때문에 vue가 제공하는 템플릿 안에서 손 쉽게 개발이 가능하다. 

• 즉, 자바스크립트를 몰라도 프론트엔드 코드를 손쉽게 작성할 수 있다.
  
  • 예를 들어 배열 형태의 데이터를 상태 관리를 해 줄 필요가 있을 때, 자바스크립트의 얕은 복사 방법(spread 연산자 등)을 알고 있지 않으면 React의 setState를 제대로 사용할 수 없다. vue에서는 그와 관계없이 this.array[1] = 'data' 이런 식으로 변경해도 무방하다.
• (주변 백엔드 개발자들도 프론트 팀원이 없을 때 급하게 vue를 사용하는 것을 몇 번 보았다. react는 해보다가 포기했다고 이야기를 많이들 하셨다.)

 

내 기준 치명적인 단점

1. 사실 장점이라고 적은 1, 2도 확장성이 용이한 애플리케이션을 구축하고자 하는 입장에서는 큰 단점이었다. 

2. 하지만 그것보다도 더 큰 단점은... 레퍼런스가 없어도 너무 없다.

• 어떤 기능을 구현하기 위해 라이브러리를 사용하려고 해도, 어떤 라이브러리가 주로 사용이 되는지 레퍼런스를 찾기 쉽지 않았고 또한 해당 라이브러리에 문제가 있었을 때 그 문제 해결을 위해 구글링을 해도 react로 개발했을 때보다 레퍼런스 양이 정말 너무 없다는 것을 경험적으로 체감했다.
• 특정 버그나 이슈가 있을 때 내가 찾을 수 있었던 거의 유일한 장소는 공식 문서와 해당 깃헙 이슈란이었다. 그로 인해 시간적으로 많이 소모를 했던 적이 몇 번 있었다. 

3. 그 외에도 타입스크립트 사용이 쉽지 않았다.

 

 

나의 결론

딱히 큰 이유가 없는 이상은 확장성과 자유도가 높고, 자바스크립트 기반인 리액트로 프로젝트를 진행할 것 같다.

 

 

레퍼런스

https://codingapple.com/unit/why-use-vue-over-react/ 

https://radixweb.com/blog/react-vs-vue 

https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88