React - React, Vue, Angular

React

• Meta(Facebook)에서 개발한 라이브러리
• JSX 문법을 사용
• View 레이어에 초점, 컴포넌트 기반으로서 각 컴포넌트는 자체 상태(State)와 생명주기 (lifec cycle)을 가짐
• 가상 DOM(Virtual DOM)을 활용, 단방향 데이터 흐름을 강조하여 상태 및 속성을 통한 컴포넌트 간 데이터 전달이 중심
• 단일 책임의 원칙에 따라서 UI 컴포넌트를 재사용 할 수 있고, 독립적으로 개발할 수 있음
• Redux, Recoil, Justand 등 별도의 상태관리 라이브러리 사용
• 높은 자유도에 따른 러닝 커브가 존재

Vue

• Evan You(개인 프로젝트)가 만든 프레임워크
• 컴포넌트 기반으로 React와 비슷한 UI 구성이지만 더 직관적인 API 및 탬플릿 문법(Single File Components) 사용
• 양방향 데이터 바인딩을 지원하며, 단일 파일 컴포넌트(Single File Components)라는 개념을 통해 HTML, CSS, JavaScript 코드를 한 파일에 구성
• 'Vuex' 라는 상태 관리 라이브러리 공식 제공
• 러닝 커브가 제일 낮음

Angular

• Google이 만든 프레임워크 (2010 - AngularJS, 2016 - Angular 2+)
• Typescript 사용
• MVC 패턴을 따르며 'All-in-One'을 지향하여 통합 솔루션을 제공함 (라우팅, 폼, HTTP 클라이언트, 상태관리, DI 등)
• 양방향 데이터 바인등을 통해 모델-뷰 간의 동기화를 자동으로 처리
• 자체적인 상태 관리 메커니즘 내장, NgRx 등 라이브러리도 사용 가능
• 러닝 커브가 가파름

코드 비교

//-------- react --------//
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>
  );
}


//-------- vue --------//
<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>


//-------- angular --------/
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++;
  }
}

결론

• React는 유연성과 커스터마이징 가능성이 뛰어난 라이브러리로, 단일 책임 원칙에 따라 설계되어 있으며 다양한 서드파티 라이브러리를 통해 기능을 확장 가능
• Vue는 직관적이고 사용하기 쉬운 API를 제공하는 프로그레시브 프레임워크로, 소규모부터 대규모 애플리케이션까지 개발 가능
• Angular는 완전한 프레임워크로, 모든 것을 내장하여 제공하며, 대규모 애플리케이션 개발에 최적화됨