React, Vue.js, Angular 프레임워크 소개 및 차이점

프론트엔드 개발을 하다 보면 다양한 프레임워크를 접하게 됩니다. 그중 대표적으로 React, Vue.js, Angular는 각기 다른 특징과 장점을 가지고 있습니다. 이 글에서는 각 프레임워크의 주요 특징과 활용 사례를 비교하여 설명합니다.

React

React는 Facebook에서 개발한 컴포넌트 기반의 UI 라이브러리입니다. 주로 동적이고 복잡한 사용자 인터페이스를 구축하는 데 사용됩니다.

주요 특징

• 컴포넌트 기반 아키텍처: UI를 재사용 가능한 컴포넌트로 분리하여 유지보수를 쉽게 합니다.
• 단방향 데이터 흐름: 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르며, 데이터의 흐름이 예측 가능해집니다.
• Virtual DOM: DOM 조작을 효율적으로 처리하여 성능을 최적화합니다.
• React Hooks: 클래스 없이 상태와 생명 주기를 관리할 수 있는 useState, useEffect 등의 훅 제공.

코드 예시

간단한 Todo 리스트 애플리케이션을 만들어 봅시다.

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState('');

  const addTask = () => {
    setTasks([...tasks, task]);
    setTask('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addTask}>추가</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

---

Vue.js

Vue.js는 Evan You가 개발한 점진적 프레임워크로, 소규모 애플리케이션부터 대규모 프로젝트까지 유연하게 사용할 수 있습니다.

주요 특징

• 양방향 데이터 바인딩: v-model 디렉티브를 통해 데이터와 UI를 동기화합니다.
• 컴포넌트 기반: React와 마찬가지로 재사용 가능한 컴포넌트 기반 아키텍처를 제공합니다.
• 반응형 데이터 시스템: 데이터 변경 사항을 자동으로 DOM에 반영합니다.
• 간결한 문법: 템플릿 문법이 직관적이고 사용하기 쉽습니다.

코드 예시

Vue.js로 Todo 리스트 애플리케이션을 작성해보겠습니다.

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="task" placeholder="할 일을 입력하세요" />
    <button @click="addTask">추가</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      task: '',
    };
  },
  methods: {
    addTask() {
      if (this.task) {
        this.tasks.push(this.task);
        this.task = '';
      }
    },
  },
};
</script>

---

Angular

Angular는 Google에서 개발한 풀스택 프레임워크로, 복잡한 애플리케이션을 구축할 때 유용합니다.

주요 특징

• 완전한 프레임워크: 상태 관리, HTTP 클라이언트, 라우팅 등의 모든 기능을 포함합니다.
• TypeScript 사용: 정적 타입 언어로 코드를 작성하여 오류를 사전에 방지할 수 있습니다.
• 양방향 데이터 바인딩: HTML과 컴포넌트 간의 상호작용을 쉽게 처리합니다.
• 의존성 주입(DI): 의존성 관리를 통해 모듈화를 쉽게 합니다.

코드 예시

Angular로 Todo 리스트를 작성해보겠습니다.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  tasks: string[] = [];
  task: string = '';

  addTask() {
    if (this.task) {
      this.tasks.push(this.task);
      this.task = '';
    }
  }
}

<!-- app.component.html -->
<div>
  <h1>Todo List</h1>
  <input [(ngModel)]="task" placeholder="할 일을 입력하세요" />
  <button (click)="addTask()">추가</button>
  <ul>
    <li *ngFor="let task of tasks">{{ task }}</li>
  </ul>
</div>

---

React, Vue.js, Angular 비교

데이터 바인딩	단방향	양방향	양방향
학습 곡선	중간	낮음	높음
성능	높음	높음	중간
사용 언어	JavaScript	JavaScript	TypeScript
생태계	크고 방대함	유연하고 간결함	강력한 통합 기능

---

 

각 프레임워크는 상황과 요구에 따라 다르게 선택됩니다. 간단한 프로젝트에는 Vue.js를, 복잡한 대규모 애플리케이션에는 Angular를, 동적이고 커스터마이즈가 필요한 경우에는 React를 사용하는 것이 적합합니다. 프로젝트의 특성을 고려하여 적절한 프레임워크를 선택하는 것이 중요합니다.