React vs Vue vs Angular 비교: 2025년 기준 프레임워크 선택 가이드

State 변경 → Virtual DOM 업데이트 → Diffing 알고리즘 → 실제 DOM에 최소한으로 반영

// State가 변경되면 React가 자동으로 최적의 DOM 업데이트를 처리
function App() {
  const [items, setItems] = useState(['A', 'B', 'C'])

  const addItem = () => {
    setItems(prev => [...prev, 'D'])
  }

  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
      <button onClick={addItem}>추가</button>
    </ul>
  )
}

<template>
  <div>
    <!-- items가 변경되면 이 부분만 자동 업데이트 -->
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">추가</button>
  </div>
</template>

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

const items = ref(['A', 'B', 'C'])

const addItem = () => {
  items.value.push('D')
}
</script>

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="addItem()">추가</button>
  `
})
export class AppComponent {
  items = ['A', 'B', 'C']

  addItem() {
    this.items = [...this.items, 'D']
    // Zone.js가 이 변경을 감지하고 Angular에게 알림
  }
}

React + ReactDOM: ~45KB
React Router: ~15KB
Redux Toolkit: ~13KB
Axios: ~13KB
-----
합계: ~86KB (gzip 기준)

Vue 3: ~34KB
Vue Router: ~12KB
Pinia: ~3KB
Axios: ~13KB
-----
합계: ~62KB (gzip 기준)

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])
  const [input, setInput] = useState('')

  const addTodo = () => {
    if (!input.trim()) return
    setTodos(prev => [...prev, { id: Date.now(), text: input }])
    setInput('')
  }

  return (
    <div className="app">
      <h1>카운터: {count}</h1>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <button onClick={() => setCount(c => c + 1)}>+</button>

      <hr />

      <div>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyPress={e => e.key === 'Enter' && addTodo()}
          placeholder="할 일 입력..."
        />
        <button onClick={addTodo}>추가</button>
      </div>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  )
}

export default App

<template>
  <div class="app">
    <h1>카운터: {{ count }}</h1>
    <button @click="count--">-</button>
    <button @click="count++">+</button>

    <hr />

    <div>
      <input
        v-model="input"
        @keypress.enter="addTodo"
        placeholder="할 일 입력..."
      />
      <button @click="addTodo">추가</button>
    </div>

    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

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

const count = ref(0)
const input = ref('')
const todos = ref([])

const addTodo = () => {
  if (!input.value.trim()) return
  todos.value.push({ id: Date.now(), text: input.value })
  input.value = ''
}
</script>

// app.component.ts
import { Component } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { CommonModule } from '@angular/common'

interface Todo {
  id: number
  text: string
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="app">
      <h1>카운터: {{ count }}</h1>
      <button (click)="count = count - 1">-</button>
      <button (click)="count = count + 1">+</button>

      <hr />

      <div>
        <input
          [(ngModel)]="input"
          (keypress)="onKeyPress($event)"
          placeholder="할 일 입력..."
        />
        <button (click)="addTodo()">추가</button>
      </div>

      <ul>
        <li *ngFor="let todo of todos">{{ todo.text }}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  count = 0
  input = ''
  todos: Todo[] = []

  onKeyPress(event: KeyboardEvent) {
    if (event.key === 'Enter') this.addTodo()
  }

  addTodo() {
    if (!this.input.trim()) return
    this.todos = [...this.todos, { id: Date.now(), text: this.input }]
    this.input = ''
  }
}

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 },
  }
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

// 컴포넌트에서 사용
import { useSelector, useDispatch } from 'react-redux'
function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}

import { create } from 'zustand'

const useCounterStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}))

function Counter() {
  const { count, increment } = useCounterStore()
  return <button onClick={increment}>{count}</button>
}

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: state => state.count * 2,
  },
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- },
  }
})

// 컴포넌트에서 사용
<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} (2배: {{ counter.doubleCount }})</p>
  <button @click="counter.increment">+</button>
</template>

// counter.service.ts
import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs'

@Injectable({ providedIn: 'root' })
export class CounterService {
  private count$ = new BehaviorSubject(0)
  readonly count = this.count$.asObservable()

  increment() { this.count$.next(this.count$.value + 1) }
  decrement() { this.count$.next(this.count$.value - 1) }
}

// 컴포넌트에서 사용
@Component({
  template: `
    <p>{{ count$ | async }}</p>
    <button (click)="counter.increment()">+</button>
  `
})
export class CounterComponent {
  count$ = this.counter.count
  constructor(public counter: CounterService) {}
}

interface ButtonProps {
  label: string
  onClick: () => void
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
}

const Button: React.FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  disabled = false,
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  )
}

<script setup lang="ts">
interface Props {
  label: string
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  disabled: false,
})

const emit = defineEmits<{
  click: []
}>()
</script>

<template>
  <button
    :disabled="props.disabled"
    :class="`btn btn-${props.variant}`"
    @click="emit('click')"
  >
    {{ props.label }}
  </button>
</template>

import { Component, Input, Output, EventEmitter } from '@angular/core'

type ButtonVariant = 'primary' | 'secondary' | 'danger'

@Component({
  selector: 'app-button',
  template: `
    <button
      [disabled]="disabled"
      [class]="'btn btn-' + variant"
      (click)="handleClick()"
    >
      {{ label }}
    </button>
  `
})
export class ButtonComponent {
  @Input() label!: string              // ! = 필수 (strictPropertyInitialization)
  @Input() variant: ButtonVariant = 'primary'
  @Input() disabled = false
  @Output() clicked = new EventEmitter<void>()

  handleClick() {
    this.clicked.emit()
  }
}

// Next.js App Router (app/users/page.tsx)
// 서버 컴포넌트: 서버에서 데이터를 가져와 HTML로 렌더링
async function UsersPage() {
  // fetch가 서버에서 실행됨
  const users = await fetch('https://api.example.com/users').then(r => r.json())

  return (
    <div>
      <h1>사용자 목록</h1>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

export default UsersPage

<!-- pages/users.vue -->
<script setup>
// useFetch는 SSR과 CSR을 모두 처리
const { data: users } = await useFetch('/api/users')
</script>

<template>
  <div>
    <h1>사용자 목록</h1>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </div>
</template>

# Angular 17+ SSR 프로젝트 생성
ng new my-app --ssr

// Angular Universal은 Node.js 서버에서 Angular 앱을 렌더링
// app.config.server.ts
import { provideServerRendering } from '@angular/ssr'

export const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering()
  ]
}

// 잘못된 예: 파생 데이터를 State로
const [total, setTotal] = useState(0)
useEffect(() => {
  setTotal(items.reduce((s, i) => s + i.price, 0))
}, [items])

// 올바른 예: 렌더링 중 계산
const total = items.reduce((s, i) => s + i.price, 0)

// 잘못된 예: userId가 바뀌어도 재실행 안 됨
useEffect(() => {
  fetchUser(userId)
}, [])  // userId 누락

// 올바른 예
useEffect(() => {
  fetchUser(userId)
}, [userId])

// 잘못된 예: 목록이 바뀌면 항목이 뒤섞임
items.map((item, index) => <Item key={index} item={item} />)

// 올바른 예
items.map(item => <Item key={item.id} item={item} />)

const count = ref(0)

// 잘못된 예 (template 밖에서)
count++  // 작동 안 함

// 올바른 예
count.value++

const state = reactive({ count: 0, name: 'Amy' })

// 잘못된 예: 반응성 잃음
const { count, name } = state
count++  // 변경해도 UI 업데이트 안 됨

// 올바른 예: toRefs 사용
const { count, name } = toRefs(state)
count.value++  // 반응성 유지

// 잘못된 예
methods: {
  fetchData() {
    setTimeout(function() {
      this.data = 'loaded'  // this가 undefined!
    }, 1000)
  }
}

// 올바른 예: 화살표 함수 사용
methods: {
  fetchData() {
    setTimeout(() => {
      this.data = 'loaded'  // 화살표 함수는 this를 상위에서 상속
    }, 1000)
  }
}

// 잘못된 예: 메모리 누수
ngOnInit() {
  this.service.getData().subscribe(data => {
    this.data = data
  })
}

// 올바른 예 1: takeUntil 패턴
private destroy$ = new Subject<void>()

ngOnInit() {
  this.service.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(data => this.data = data)
}

ngOnDestroy() {
  this.destroy$.next()
  this.destroy$.complete()
}

// 올바른 예 2: async 파이프 (자동 구독 해제)
// template에서: {{ data$ | async }}

// 기본: 모든 이벤트에서 전체 트리 검사 (느릴 수 있음)

// 성능 최적화: OnPush Change Detection
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class OptimizedComponent {
  // Props(Input)가 변경될 때만 업데이트
}

// 컴포넌트마다 다른 인스턴스 생성 (의도하지 않은 경우)
@Component({
  providers: [CounterService]  // 컴포넌트마다 새 인스턴스
})

// 앱 전체에서 싱글톤으로 공유 (대부분 원하는 것)
@Injectable({ providedIn: 'root' })
export class CounterService {}