Vue / React / Angular 🛜

프론트엔드 프레임워크•라이브러리로, 요즘 많이 사용되고 있는데

나도 개발을 하면서 정확히 모르는 부분이 있는데 공부하면서 정리를 해보았다.

 

Vue

진입 장벽이 낮고 학습하기 쉬운 프레임워크로 유명하다. MVVM (Model-View-ViewModel) 패턴 기반이다.

 

장점	1) 간결하고 직관적이다. HTML, CSS, JavaScript만 알면 빠르게 시작 가능 2) 양방향 데이터 바인딩이다. v-model을 사용해서 데이터 연결 3) 컴포넌트 기반 개발이다. 재사용 가능한 컴포넌트 단위로 UI를 구성 가능 4) Vue Router나 Vuex 등이 잘 갖춰져 있다.
단점	1) 규모가 큰 프로젝트에서는 코드 관리나 아키텍쳐가 다소 난이도가 있다. 2) React는 Facebook에서, Angular는 Google에서 만든 프레임워크에 비해 지원은 적다. 3) Vue2에서는 Typescript 통합이 불편했지만, Vue3에서는 개선이 좀 되었다.

 

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

 

 

React

Facebook (현 Meta)에서 만든 라이브러리이며, 컴포넌트 기반 UI 구성에 초점을 두고 있다.

장점	1) Virtual DOM을 사용한다. 실제 DOM 대신 가상의 DOM을 조작하여 빠른 렌더링 성능 지원 2) 높은 재사용성이 가능하다. 컴포넌트를 조합해 대규모 UI를 효율적으로 구성 가능 3) Next.js, Redux, React Query, Tailwind 등과의 강력한 연계 가능 4) React Hooks을 지원한다. 함수형 컴포넌트에서도 상태 관리와 라이프사이클 가능
단점	1) HTML과 JS가 혼합된 형태(JSX)로 작성되어 처음엔 어색 2) 규모가 커지면 Redux 등 상태 관리 도구가 필요 3) 강력한 규칙이 없어서 개발자마다 스타일이 다를 수 있다.

 

import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('Hello React!');

  return (
    <div>
      <h1>{message}</h1>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
    </div>
  );
}

export default App;

 

 

Angular

Google에서 만든 프레임워크로 TypeScript를 기반으로 만들어졌다. MVC(Model-View-Controller) 패턴을 확장한 형태를 가지고 있다.

 

장점	1) 대규모 프로젝트에 적합하다. 강력한 의존성 주입, 모듈 시스템, 강력한 타입 지원 2) 양방향 데이터 바인딩이 가능하다. [(ngModel)]을 이용해서 데이터 연결 3) 공식 지원되는 툴과 구조가 다양하다. CLI, 라우터, 폼, HTTP 모듈 등 내장 기능이 많음 4) TypeScript가 기본이다. 정적 타입을 통해 코드의 안정성과 유지보수를 강화
단점	1) 러닝 커브(진입 장벽)이 높다. 학습해야 할 개념(모듈, 서비스, DI 등)이 많음 2) 단순한 프로젝트에는 부담스러울 수 있다. 3) 템플릿 구문 복잡하다. HTML과 Angular의 독자적인 바인딩 문법을 같이 사용해야 함

 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ message }}</h1>
    <input [(ngModel)]="message" />
  `,
})
export class AppComponent {
  message = 'Hello Angular!';
}

 

 

표로 정리해보았다.

 

정체성	UI 라이브러리	풀스택 프레임워크	프레임워크(코어는 가볍지만 확장 가능)
언어	JavaScript + JSX + (TypeScript 선택 가능)	TypeScript	JavaScript + Vue 템플릿 + (TypeScript 선택 가능)
데이터 바인딩	단방향 (props & state)	양방향 ([(ngModel)])	양방향 (v-model)
DOM 관리	Virtual DOM	실제 DOM 조작(Zone.js)	Virtual DOM
상태 관리	외부 툴 사용(Redux, Zustand 등)	내장 서비스와 RxJS	Vuex, Pinia 등
학습 곡선	중간 (JSX와 상태 관리 학습 필요)	높음 (TypeScript, DI, RxJS 등 학습 필요)	낮음 (HTML, CSS, JS만으로 빠른 학습 가능)
사용 용도	단순~중대형 웹앱, SPA	대형 엔터프라이즈 앱	빠른 프로토타이핑, 소규모~중규모 앱

 

간단 요약

• React: 라이브러리라서 자유도가 높고 필요에 따라 추가 모듈을 도입 필요
• Angular: 모든 걸 다 갖춘 프레임워크라서 대형 프로젝트에 적합하지만 러닝커브가 높음
• Vue: 중간 성격으로 진입 장벽이 낮고 빠른 개발에 유리

 

React와 Svelte

요즘 Svelte도 많이 사용하고 있는데 React를 경험해봤으면 쉽게 적응할 수 있다고, 비슷하다고 말한다.

비교하는 이유는, 둘 다 컴포넌트 기반의 라이브러리여서 인 것 같다. 그러나 철학과 동작 방식이 다르다!

 

	React	Svelte
철학	Virtual DOM으로 변경사항 감지 후 업데이트	컴파일 단계에서 최적화된 코드 생성
런타임	Virtual DOM 비교와 리렌더링	컴파일 시점에서 DOM 조작 코드 생성
성능	초기 렌더링과 업데이트 시 Overhead 존재	빠른 렌더링과 업데이트
코드량	상태 관리 등 추가 코드 필요 (Hooks 등)	간결한 코드 (반응형 변수로 자동 추적)
러닝커브	중간 (JSX와 상태 관리 이해 필요)	낮음 (기본 JS만 알면 시작 가능)
생태계	매우 방대 (Next.js, Redux, React Query 등)	상대적으로 작음 (SvelteKit 등)
실제 DOM	Virtual DOM → Diff → Patch	컴파일 시 실제 DOM 조작 코드 삽입
대표 문법 차이	useState, useEffect 등으로 상태 관리	$:를 사용한 반응형 변수

 

React와 Svelte 코드 비교

// React
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}


// Svelte
<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicks: {count}
</button>

 

• React: 런타임에 Virtual DOM으로 변경사항을 감지하고 업데이트
• Svelte: 컴파일러로 동작하며 빌드 단계에서 효율적인 DOM 조작 코드로 변환
• 결과적으로 Svelte는 코드가 간결하고 런타임 오버헤드가 적어 성능상 이점이 있지만, 생태계가 React만큼 크진 않음

라이브러리와 프레임워크

React와 Svelte는 라이브러리, Vue와 Angular는 프레임워크라고 말하는데 뭐가 다른 걸까?

React는 UI를 컴포넌트로 만들고 효율적으로 렌더링하는 데 집중한다. 화면 렌더링 (Virtual DOM), 상태 관리, 컴포넌트 시스템 제공 이 세가지만 중점적으로 한다. 때문에, 이 외의 라우팅이나 HTTP 처리, 상태 저장 등은 외부 도구를 사용해야 한다.

	라이브러리	프레임워크
주도권	개발자가 코드 흐름을 직접 제어함	프레임워크가 구조와 흐름을 강제하거나 주도함
기능 범위	특정 기능(예: UI 렌더링)만 제공	라우팅, 상태관리, 폼 처리, 의존성 주입 등 통합 제공
확장성/구성	필요한 도구를 개발자가 선택해서 붙임	대부분의 기능이 기본 제공되며 구조도 함께 설계됨
유연성	매우 유연함 (구조 제약 거의 없음)	덜 유연하지만, 일관된 방식 유지 가능
예시 비유	원하는 걸 조합 ⩷ 레고 조각	매뉴얼대로 조립 ⩷ 레고 키트

 

 

React는 내가 구조를 만들고, Vue와 Angular는 구조가 나를 이끈다