Vue vs React vs Svelte

<!-- Vue — 가변(Mutable) + Proxy 추적 -->
<script setup>
const count = ref(0)
count.value++  // 직접 변경 → 자동 UI 업데이트
</script>

// React — 불변(Immutable) + 리렌더링
function Counter() {
  const [count, setCount] = useState(0)
  setCount(prev => prev + 1)  // 새 값으로 교체 → 컴포넌트 재실행
}

<!-- Svelte — 할당만으로 반응 (컴파일러가 처리) -->
<script>
let count = 0
count++  // 컴파일러가 변경 감지 코드를 삽입
</script>

<!-- Vue — 간결 -->
<script setup>
const count = ref(0)
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>

// React — 상대적으로 길음
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

<!-- Svelte — 가장 간결 -->
<script>
let count = 0
</script>
<button on:click={() => count++}>{count}</button>

Vue:  ████████░░  — 낮음~중간
  - HTML 기반 템플릿으로 진입장벽 낮음
  - 공식 문서가 매우 잘 작성됨
  - Composition API는 약간의 학습 필요

React: ████████░░  — 중간
  - JSX 학습 필요
  - Hooks 규칙 이해 필요
  - 상태 관리 라이브러리 선택의 피로

Svelte: ██████░░░░  — 낮음
  - 기존 HTML/CSS/JS 지식으로 시작 가능
  - 프레임워크 특유의 문법이 적음
  - 생태계가 작아 고급 패턴은 직접 구현

Vue를 선택할 때:
✓ 점진적 도입이 필요한 프로젝트
✓ 팀에 다양한 수준의 개발자가 있을 때
✓ Options API에서 시작해 점진적으로 심화
✓ 한국/중국/일본 시장 (채용이 활발)

React를 선택할 때:
✓ 대규모 팀, 장기 프로젝트
✓ 풍부한 생태계가 필요할 때
✓ React Native로 모바일도 커버
✓ 미국/유럽 시장 (채용이 가장 많음)

Svelte를 선택할 때:
✓ 성능이 최우선인 프로젝트
✓ 번들 크기가 중요할 때 (임베디드, 위젯)
✓ 작은 팀, 빠른 프로토타이핑
✓ 최신 기술에 열린 팀