Vue와 React의 차이

개요

자 000씨, Vue와 React의 공통점, 차이점을 이야기해보세요.

 

누군가는 쉽게 답할 수 있을지 모르겠지만, 얼마전 내게 이런 질문이 들어왔을 때 쉽사리 대답을 못했다.

 

Vue나 React의 특징을 말하자면 말하겠는데 이 특징들이 각 기술에 한정되는 특징인지도 모르겠고, 특히나 Vue는 7주라는 짧은 기간동안 학습과 개발을 동시에 진행하다보니, 자세히 모른다고 느꼈다.

 

공식문서, 블로그에서 이야기하는 차이점을 이해하고 지식이 부족한 Vue에 대해서도 좀 더 배워보려고 한다.

 

프레임워크, 라이브러리

프레임워크와 라이브러리를 어떤 기준으로 분류하냐에 따라 답은 달라지겠지만,

Vue의 경우 프레임워크, React는 라이브러리로 구분할 수 있다.

 

난 이제껏 다양한 기능을 제공하는건 프레임워크 특정 기능을 모듈화 해 제공하는건 라이브러리로 생각했는데 너무 간소화된 이해같다.

 

제어흐름

프레임워크가 애플리케이션의 흐름을 제어하고, 개발자가 프레임워크가 정한 규칙에 맞춰 코드를 작성한다.(제어의 역전)

 

반면, 라이브러리의 경우 개발자가 직접 라이브러리의 함수나 메서드를 호출해 사용한다. 즉 개발자가 전체적인 흐름을 제어한다.

 

기능범위

프레임워크의 경우 애플리케이션 설계에 필요한 다양한 기능들을 제공한다. 라우팅, 상태관리 빌드도구 등을 제공한다.

 

반면 라이브러리의 경우 특정기능을 제공하고 개발자는 이를 통해 자유롭게 구조 설계가 가능하다.

 

이런 관점들로 봤을 때, Vue는 코어 라이브러리 말고도 라우팅(vue-router), 상태관리(vuex, pinia), 빌드도구를 제공하기에 프레임워크라고 볼 수 있다.

 

React는 그에반해 상태관리, 빌드시스템등 별도의 라이브러리로 추가해 사용해야하기에 라이브러리에 가깝다고 할 수 있다.

 

 

코드스타일

 

React

React의 경우 JSX를 사용하고, 이를 통해 UI와 로직이 통합이 가능하다.

 

내부 상태관리는 useState를 통해 이루어지고, 조건부 렌더링의 경우 &&. ?, if-else문 등 다양한 방법이 존재한다.

 

스타일의 경우 JSX내 인라인 스타일 또는 외부 CSS를 통해 이루어진다.

 

이벤트 핸들링은 내부 onClick, onChange와 같이 이벤트 핸들러, 리스너를 구현한다.

 

import { useState } from 'react';

function App() {
  const [isMagicalAnswerVisible, setIsMagicalAnswerVisible] = useState(false);

  return (
    <div className="App">
      <p className="question">
        어떤 프론트엔드 프레임워크가 최고일까요?
      </p>
      <button 
        className="button" 
        onClick={() => setIsMagicalAnswerVisible(!isMagicalAnswerVisible)}
      >
        알려줘!
      </button>
      {isMagicalAnswerVisible && (
        <p className="answer">
          ...그건 바로 Vue와 React 둘 다!
        </p>
      )}
    </div>
  );
}

export default App;

 

Vue

 

Vue의 경우엔 html과 유사한 템플릿 언어를 제공하고 이를 통해 초보자도 쉽게 배울 수 있다는 특징이있다.

 

나는 오히려 리액트와 함께한 세월이 길어 오히려 헷갈렸다.. ㅎ

 

Vue는 React의 state와 같은 ref 객체를 통해 상태를 관리한다. 접근할 땐, 변수처럼 접근하는 react와는 다르게 ref.value와 같이 접근한다.

 

조건부의 경우 v-if, v-else-if, v-else 디렉티브를 사용하고, 스타일의 경우 style태그를 통해 관리하지만 리액트처럼 css in code같은 것도 활용이 가능하다.

 

<template>
  <div>
    <p class="question">어떤 프론트엔드 프레임워크가 최고일까요?</p>
    <button class="button" @click="toggleAnswer">알려줘!</button>
    <p class="answer" v-if="isMagicalAnswerVisible">
      ...그건 바로 Vue와 React 둘 다!
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isMagicalAnswerVisible = ref(false)

function toggleAnswer() {
  isMagicalAnswerVisible.value = !isMagicalAnswerVisible.value
}
</script>

<style scoped>
.question { font-weight: bold; }
.button { margin-top: 10px; }
.answer { color: blue; }
</style>

 

이제 생각해보니, Vue3와 Composition API를 사용하면 Vue 코드 스타일을 jsx처럼 구현할 수 있는데 우리팀 모두 Vue에 익숙하지 않은 팀원들로 구성되서 차이를 더 못느꼈냐 싶었다.

 

 

데이터 바인딩, 반응성

React

React의 경우 단방향 데이터 바인딩을 제공한다.

상태(state) 변경 시 명시적으로 setState 함수를 호출해서 변경한다.

React의 가상 DOM과 diffing 알고리즘을 통해 변경된 부분만 실제 DOM에 반영한다.

 

+ Diffing 알고리즘

상태(state)나 props가 바뀌면, React는 전체 컴포넌트 함수를 다시 실행해서 새로운 가상 DOM 트리를 만들고, 이전 트리와 새 트리를 비교(diffing)해서 실제 DOM에 변경된 부분만 반영한다.

 

Vue

Vue의 경우 양방향 데이터 바인딩(v-model 등) 지원하지만, 최근 지양하고 있다.

데이터가 변경되면 자동으로 DOM이 업데이트 된다는 점이 유사하고, Vue 3에서는 Proxy를 사용해 데이터의 변경을 직접 감지한다.

의존성 추적을 통해 변경된 데이터에만 의존하는 컴포넌트만 재렌더링된다는 특징이있다.

 

React와는 다르게 Vue에선 이 의존성 추적 단계가 추가되며 변경된 데이터에만 반응하는 렌더링이 가능하다.

 

컴포넌트 라이프사이클

 

React: 클래스 컴포넌트의 라이프사이클 메서드(componentDidMount 등)으로 구현을 해야했으나 현재는 함수형 컴포넌트의 Hooks를 많이 사용하고 더 간결하게 구현이 가능하다. Ex) useEffect

 

Vue : 다양한 라이프사이클 메서드(created, mounted 등)를 제공하며, 반응성 시스템과 긴밀하게 연결되어 있고, Composition API로 더 세밀한 제어가 가능하다.

 

 

데이터 전달 방식

 

React : 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 데이터를 전달하고, 하위 컴포넌트에서 상위로는 콜백 함수를 props로 전달해 데이터를 올린다

 

Vue : props로 데이터를 내려주고, 이벤트($emit)로 데이터를 올린다. 양방향 바인딩도 존재는 하지만, 지양하는 분위기이다.

 

리렌더링 기준

 

React

상태나 props가 바뀌면 컴포넌트 함수 전체가 다시 실행되어 리렌더링 된다. key 속성은 주로 리스트에서 아이템의 고유성을 식별할 때 사용하는데,

같은 컴포넌트에 같은 key를 유지하면, props나 state가 바뀌어도 React는 기존 인스턴스를 재활용한다.(컴포넌트가 재생성되지 않음).

 

즉, key가 같으면 데이터가 달라져도 리렌더링은 발생하지만, 컴포넌트 인스턴스는 재생성되지 않는다.

 

강제 리렌더링을 원한다면, key 값을 변경하면 컴포넌트 인스턴스를 완전히 새로 만들도록 해야한다.

 

Vue

데이터가 바뀌면, Vue는 해당 데이터에 의존하는 UI 부분만 다시 렌더링한다. React와 다르게 key가 다른경우,

컴포넌트 인스턴스를 새로 만들고, 동일한 경우 내부적으로는 데이터 변화를 감지해 UI만 업데이트합니다.

 

강제 리렌더링 방식의 경우 React와 동일하다.

 

정리

Vue에선 key 값이 동일하다면, 컴포넌트 인스턴스는 유지되고 ,데이터가 바뀌면 UI가 바뀌므로 컴포넌트 함수 전체가 재실행되지 않는다.

반면 React에선 key가 같아도 데이터가 바뀌면, 컴포넌트 함수전체가 다시 실행되어 리렌더링이 발생한다.

 

+ 컴포넌트 인스턴스

컴포넌트 정의(함수)를 실제로 사용(마운트)하여, 메모리 상에 생성된 실체 객체를 의미

예를 들어, Vue에서는 <MyComponent />를 템플릿에 사용 시, 그 시점에 컴포넌트 인스턴스가 생성되어 데이터, 메서드, 라이프사이클 등을 갖게 된다.

React에서는 함수형 컴포넌트를 호출해서 실제 DOM에 렌더링할 때, 내부적으로 해당 컴포넌트의 인스턴스(엄밀히 말하면 함수 실행 결과의 가상 DOM 트리)가 만들어진다

 

참고

https://velog.io/@tl5235566/ReactVue-React%EC%99%80-Vue%EC%9D%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84-%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%B9%84%EA%B5%90%EC%99%80-%EC%9D%B4%ED%95%B4

[React/Vue] React와 Vue의 컴포넌트 라이프 사이클 비교와 이해

https://www.reese-log.com/reactivity-in-vue-and-react

Vue와 React의 Reactivity

https://velog.io/@wngkdroqkf441/Frontend-%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EB%8C%80%EB%B9%84-React%EC%99%80-Vue

[Frontend 기술 면접 대비] React 와 Vue