Svelte vs React vs Vue — 세 프레임워크 비교 분석

// React — 명시적 setter, 불변성
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '홍길동', scores: [] });

setCount(prev => prev + 1);
setUser(prev => ({ ...prev, scores: [...prev.scores, 100] }));

<!-- Vue — Proxy + ref/reactive -->
<script setup>
const count = ref(0);
const user = reactive({ name: '홍길동', scores: [] });

count.value++;              // .value 필요
user.scores.push(100);      // 직접 변경 가능
</script>

<!-- Svelte — $state + 직접 변경 -->
<script>
let count = $state(0);
let user = $state({ name: '홍길동', scores: [] });

count++;                    // 직접 변경
user.scores.push(100);      // 직접 변경
</script>

// React
function Greeting({ name, onGreet }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={onGreet}>인사</button>
    </div>
  );
}

<!-- Vue -->
<script setup>
const props = defineProps(['name']);
const emit = defineEmits(['greet']);
</script>

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
    <button @click="emit('greet')">인사</button>
  </div>
</template>

<!-- Svelte -->
<script>
let { name, onGreet } = $props();
</script>

<div>
  <h1>Hello, {name}!</h1>
  <button onclick={onGreet}>인사</button>
</div>

// React — JavaScript 표현식
{isLoggedIn ? <Dashboard /> : <Login />}
{items.map(item => <Item key={item.id} {...item} />)}

<!-- Vue — 디렉티브 -->
<Dashboard v-if="isLoggedIn" />
<Login v-else />
<Item v-for="item in items" :key="item.id" v-bind="item" />

<!-- Svelte — 블록 문법 -->
{#if isLoggedIn}
  <Dashboard />
{:else}
  <Login />
{/if}
{#each items as item (item.id)}
  <Item {...item} />
{/each}

React를 선택할 때:
├── 대규모 팀, 기존 React 코드베이스
├── 모바일 앱 필요 (React Native)
├── 최대한 넓은 생태계와 취업 시장
└── 복잡한 상태 관리 (Redux, Zustand 등 선택지 많음)

Vue를 선택할 때:
├── 점진적 도입 (기존 프로젝트에 부분 적용)
├── HTML 템플릿 기반 개발 선호
├── 공식 도구 통일 (Vue Router, Pinia 등)
└── 중국/아시아 시장 타겟

Svelte를 선택할 때:
├── 성능이 최우선 (작은 번들, 빠른 렌더링)
├── 적은 코드로 빠르게 개발
├── 풀스택 앱 (SvelteKit)
└── 새 프로젝트에서 최신 기술 시도