Vue , React 비교 (2023.3.12 업데이트)

 

뷰 리액트에 대한 비교글은 많지만 제가 실무에서 사용하면서 느낀점에 대해서 주관적으로 포스팅해보려고 합니다.

주관적인 관점에서 포스팅 하는만큼 잘못된 점이나 다른 의견은 댓글로 알려주시면 감사하겠습니다.

 

Vue 3.x 버전에 대해서 다루겠습니다. ( MS가 IE 지원을 드랍한 상황에서 Vue 2.x 를 더 이상 사용할 이유가 크게 없기 때문입니다. )

 

Vue 3.x 버전부터는 React와 상당히 유사합니다.

간단히 카운트를 증가시키는 기능을 예제로 보겠습니다.

 

React 

import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const addCount = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={addCount}>count is {count}</button>
      </div>
    </div>
  );
}

export default App;

Vue

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const addCount = () => {
  count.value = count.value + 1;
};
</script>

<template>
  <div className="App">
    <h1>Vite + Vue</h1>
    <div class="card">
      <button type="button" @click="addCount">count is {{ count }}</button>
    </div>
  </div>
</template>

<style scoped>
.card {
  padding: 2em;
}
</style>

간단히 비교하면 리액트에서는 useState을 사용하고 Vue에서는 ref를 사용합니다.

유사점: 상태값을 정의하고 상태값을 변경하므로서 랜더링을 제어 합니다.

차이점: React는 return문에서 JSX를 이용해서 템플릿을 정의합니다. Vue에서는 template 영역을 별도로 정의해서 사용합니다. CSS 부분도 Vue에서는 기본적으로 SFC(Single File Component)라는 형태를 지원하고 style 영역에 정의해서 사용합니다. 이런 형태를 CSS in JS 라고하며 React에서는 Emotion, Styled Component를 이용해서 구현할 수 있습니다.

 

이처럼 Vue에서는 기본적으로 지원해주는 기능이 많기 때문에 `프레임워크`라고하고 React는 `라이브러리`라고 하지 않나 싶습니다. ( 어떻게 부르느냐는 큰 의미는 없다고 생각합니다 )

 

Vue는 프레임워크로 SFC 같은 컴포넌트 설계방식을 지원합니다. React는 기본적인 정도만 지원하고 개발자가 필요한 경우에 라이브러를 사용해서 구현하는 형태를 취하고 있습니다. 서로 장단점이 있다고 생각하고 업무 환경이나 취향에 따라 사용하면 된다고 생각합니다.

 

최적화 관련

*랜더링 최적화는 대부분의 경우 노력에 비해 효율이 떨어지기 때문에 과도한 오버엔지니어링은 불필요할 수 있습니다.

React의 경우 useMemo, useCallback 등을 이용해 랜더링 최적화를 할 수 있다.

Vue의 경우 이러한 부분을 고려하지 않고 개발해도 된다.

( 프레임워크 단에서 알아서 최적화가 된다. 예를 들어 computed 를 사용한다면 const fullName = computed(()=> firstName + lastName 이런식으로 사용했을때 fullName은 firstName, lastName 값이 변경되지 않을때 재랜더링 시 캐싱된 값을 사용한다. )

아래의 경우 React에서 useCallback을 사용하는 경우이다. 두번째 파라미터로 배열을 넘겨주므로써 해당 배열내 값들이 바뀌지 않는다면 재랜더링시 함수는 캐싱되어 재활용 된다. useMemo의 경우도 동일하게 캐싱을 위해서 배열로 사용하는 값을 넘겨주어야 한다.

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

 

 

--- 요약 ----

리액트는 자유도가 높고 그만큼 개발자의 역량이나 선호하는 스타일에 따라서 개발방법이 많이 달라질 수 있습니다. 

뷰는 어느정도 틀이 잡혀져 있기 때문에 최소한의 퀄리티는 보장된다고 생각합니다. script와 template 영역을 분류해서 사용하는 걸 선호하거나 퍼블리셔와 협업하는 경우에 더 유용합니다.

리액트는 프레임워크로서 여러 기능을 제공하는 뷰보단 라이브러리를 더 붙여서 사용하게 됩니다. 그만큼 새로운 라이브러리나 트랜드에 대해 학습해야하고 피로감이 있을 수 있을 것 같습니다.

리액트 상태관리 라이브러리에 대해서 찾아본다면 어떤 걸 사용해야 할지 고민에 빠지게 될 것이다.

( 뷰쪽은 가끔 필요한 라이브러리가 없는 경우도 있기 때문에 선택지가 많은건 장점인 것 같긴하다 )

 

개발 생태계는 React쪽이 더 활성화 되어 있고 좀 더 트랜디 하다고 느껴집니다.

취업시장에서도 리액트 개발자 수요가 더 많은거 같기는 합니다.

 

둘 다 좋은 라이브러리, 프레임워크라고 생각합니다.  구성원의 역량이나 필요에 따라 적절히 선택하여 사용하면 좋다고 생각합니다.

읽어주셔서 감사합니다.