[프레임워크] React, Vue, Angular 차이점

---

리액트(React), 뷰(Vue), 앵귤러(Angular)는 각각 JavaScript 기반의 프론트엔드 프레임워크 또는 라이브러리로, 모두 웹 애플리케이션을 개발하기 위한 도구로 사용돤다. 하지만 각각은 고유한 특징과 철학을 가지고 있다.

 

러닝 커브 (Learning Curve) : 학습곡선 

• 리액트: 자유도가 높아 초기 학습 곡선이 다소 높을 수 있다. (시간과 노력이 필요하다.)
• 뷰: 진입 장벽이 낮아 빠르게 학습할 수 있다.
• 앵귤러: 기능이 많고 복잡한 특성 때문에 학습 곡선이 다소 가파르다. (기울기가 크다는 의미로 학습 초기에 어려움이 있다.)

 

문법 및 구조 

• 리액트: JSX(JavaScript XML)라는 문법을 사용하여 컴포넌트를 정의하며, 가상 DOM(Virtual DOM)을 활용하여 성능을 최적화한다. 리액트는 단방향 데이터 흐름(One-way data binding)을 강조하며, 상태(State) 및 속성(Props)을 통한 컴포넌트 간의 데이터 전달을 중심으로 합니다.
• 뷰: 가볍고 직관적인 문법을 가지고 있다. 템플릿 기반의 문법을 사용하며, 양방향 데이터 바인딩(Two-way data binding)을 지원한다. 뷰는 단일 파일 컴포넌트(Single File Components)라는 개념을 도입하여 HTML, CSS, JavaScript 코드를 한 파일에 구성할 수 있다.
• 앵귤러: TypeScript를 사용하여 구조적이고 강력한 프레임워크다. HTML과 TypeScript로 이루어진 컴포넌트를 정의하며, 양방향 데이터 바인딩을 통해 모델과 뷰 간의 동기화를 자동으로 처리합니다.

 

React가 단방향 데이터 흐름을 강조하는 이유

https://strap.tistory.com/134

React는 왜 단방향으로만 데이터를 전달할 수 있을까? (부모 -> 자식)

 

 

코드 비교  (React, Vue, Angular 순)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

 

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  count: number = 0;

  increment() {
    this.count++;
  }
}

 

상태관리 (데이터 관리)

• 리액트: 상태 관리에는 주로 컨텍스트(Context) API와 상태 관리 라이브러리인 Redux가 사용된다. Redux는 복잡한 상태 로직을 처리하기 위해 사용되며, 상태의 단일 소스를 가지고 있다.
• 뷰: 상태 관리를 위한 Vuex라는 라이브러리를 제공합니다. Vuex는 중앙 집중화된 상태 관리를 제공하여 컴포넌트 간의 데이터 흐름을 관리합니다.
• 앵귤러: 앵귤러는 자체적으로 상태 관리를 위한 도구를 포함하고 있습니다. RxJS를 기반으로 한 Observable 패턴과 함께 상태 관리를 수행합니다.

 

라우팅

• 리액트: 리액트는 React Router와 같은 라우팅 라이브러리를 사용하여 클라이언트 측 라우팅을 처리한다.
• 뷰: 뷰 또한 Vue Router를 사용하여 라우팅을 구현한다.
• 앵귤러: 앵귤러는 기본적으로 내장된 라우터를 가지고 있어 별도의 라우팅 라이브러리를 설치할 필요가 없다.

 

크기 및 성능

• 리액트: 가상 DOM을 사용하여 효율적인 업데이트를 지원하며, 필요한 부분만 렌더링되므로 성능이 우수하다. 그러나 초기 로딩 시 라이브러리 크기가 상대적으로 큰 편이다.
• 뷰: 경량이라는 특징 때문에 초기 로딩이 빠르고 성능이 좋다.
• 앵귤러: TypeScript의 정적 타이핑과 AOT(Ahead-Of-Time) 컴파일 등의 특징으로 높은 성능을 보여주지만, 초기 로딩 시에는 무거운 라이브러리로 인해 속도가 느릴 수 있다.

 

최종 정리

특징	리액트 (React)	뷰 (Vue)	앵귤러 (Angular)
문법	JSX 문법 사용	템플릿 기반 문법	TypeScript 및 HTML로 정의
상태 관리	주로 Context API와 Redux 사용	Vuex 사용	내장된 상태 관리 기능 및 RxJS 사용
라우팅	React Router 사용	Vue Router 사용	내장된 라우터 제공
학습 곡선	중간 정도에서 높음	낮음	높음
크기 및 성능	초기 로딩이 상대적으로 큼	경량 및 빠른 초기 로딩	큰 라이브러리로 초기 로딩이 느릴 수 있음
특징 및 철학	단방향 데이터 흐름, 가상 DOM 사용	직관적이고 가벼운 구조	TypeScript 기반, 고도의 모듈화 및 기능 제공
상태 업데이트 방식	불변성을 강조, 상태 업데이트 시 새로운 객체 생성	양방향 데이터 바인딩, 상태를 직접 수정	양방향 데이터 바인딩 및 RxJS를 사용한 상태 업데이트
컴포넌트 파일 구조	단일 파일 컴포넌트 (JSX, CSS, JS)	단일 파일 컴포넌트 (.vue)	컴포넌트 파일을 TypeScript 및 HTML로 분리
생태계 및 커뮤니티	큰 생태계, 활발한 커뮤니티	활발한 생태계 및 커뮤니티	큰 생태계, 기업에서 많이 사용