React와 Vue

철학과 아키텍처

• React: UI 레이어에 집중합니다. 라우팅, 전역 상태, 데이터 패칭 등은 별도 라이브러리를 조합해 구성합니다. 작고 유연한 코어를 바탕으로 필요한 만큼 채택하는 방식입니다.
• Vue: 자주 쓰는 기능(라우터, 상태 관리 등)을 공식 패키지로 제공합니다. 싱글 파일 컴포넌트(SFC)와 권장 구조가 있어 일관된 구조로 시작하기 쉽습니다.

데이터 흐름

• React: 기본은 단방향 데이터 흐름과 불변성입니다. 상태 변경 시 해당 컴포넌트의 하위 트리가 재렌더링되고, 커밋 단계에서 실제 DOM을 최소 변경으로 갱신합니다. 상태 공유는 명시적 props/context 중심이라 추론이 쉽습니다.
• Vue: 반응성 시스템이 의존성을 추적합니다. 바뀐 데이터와 연결된 컴포넌트만 선별적으로 갱신되며, 템플릿 컴파일러의 patch flag로 불필요 패치를 줄입니다. v-model로 양방향 바인딩을 간결히 제공하되, 복잡 폼은 단방향 흐름을 섞어 관리하는 것이 좋습니다.

컴포넌트 작성 방식

React (JSX)

function Hello({ name }) {
  return <h1>Hello, {name}</h1>;
}

• 모든 것이 JS(및 TS) 표현식 안에서 이뤄져 표현력이 높습니다(조건, 리스트, 함수 합성 등).
• JSX 규칙을 익혀야 하고, 마크업·로직이 한 파일에서 강하게 결합되는 편입니다.

Vue (Template)

<script setup>
import { ref } from 'vue'
const name = ref('World')
</script>

<template>
  <h1>Hello, {{ name }}</h1>
</template>

• HTML 친화적인 템플릿으로 가독성이 좋고, <script>, <template>, <style> 분리로 역할 분담이 명확합니다.
• 템플릿에는 표현식만 쓸 수 있으므로 복잡 로직은 <script>에 두는 것이 좋습니다.

양방향 바인딩 비교

// React
const [text, setText] = useState('')
<input value={text} onChange={(e) => setText(e.target.value)} />

// Vue
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <input v-model="text" />
</template>

상태 관리

• React는 로컬 상태를 Hooks(useState, useReducer, useContext)로 관리합니다. 전역 상태는 Redux/MobX/Zustand/Recoil 등이 사용됩니다.
• Vue는 로컬 상태를 ref/reactive로, 컴포넌트 간 연결은 v-model/props/emits 또는 provide/inject로 처리합니다. 전역 상태는 Pinia가 공식 권장 라이브러리입니다.

생명 주기

• React: useEffect/useLayoutEffect로 효과를 다룹니다. 의존성 배열 관리가 핵심이며, 개발 모드 StrictMode의 이중 호출로 부작용이 드러날 수 있습니다(의도적). 커스텀 훅으로 관심사를 분리하는 패턴이 일반적입니다.
• Vue: onMounted/onUnmounted/watch/watchEffect로 처리합니다. 반응형 참조의 의존성 자동 추적으로 로직이 간결해지는 장점이 있습니다.

최적화 전략

렌더링

• React: 상태 변경 시 하위 트리를 재렌더링하고, 커밋 단계에서 DOM 최소 변경을 적용합니다. 불필요 렌더는 memo, useMemo, useCallback 등으로 제어합니다.
• Vue: 반응성 의존성 추적으로 필요한 컴포넌트만 갱신합니다. 기본 패턴을 지키면 자동 최적화 이점을 얻기 쉽습니다.

UX/상호작용

• React : startTransition, useDeferredValue로 입력·스크롤을 우선 처리해 체감 성능을 높일 수 있습니다.
• Vue : 부분/지연 하이드레이션 등으로 초기 비용을 상황에 맞게 지연하여 초기 상호작용성을 개선할 수 있습니다.

SSR/하이드레이션

• React: Streaming SSR, hydrateRoot, SSR용 <Suspense>를 통해 먼저 보여주고 점진 완성하는 패턴에 강합니다.
• Vue: 템플릿 컴파일 최적화와 Nuxt(3)를 통한 부분·지연 하이드레이션으로 초기 비용을 정교하게 관리할 수 있습니다.

React Docs
Vue Docs
Vue 3 vs React 18: A Comprehensive Comparison from a Developer’s Perspective