React, Vue, Angular 차이점

웹 프론트엔드 개발을 하다 보면 자연스럽게 마주치는 세 가지 선택지 React, Vue, Angular.

 

저도 프로젝트나 공부를 통해 이 세 가지를 직접 써보면서 각 프레임워크의 철학, 코드 스타일, 학습 난이도 등에서 뚜렷한 차이를 느낄 수 있었습니다.

 

이번 글에서는 실제 코드 예시와 함께, 제가 느꼈던 개발 방식의 차이점을 중심으로 비교해 보겠습니다.

 

1. “Hello World”부터 다르다 : 코드 구조

React (with JSX)

import React from 'react';

function App() {
  return <h1>Hello, React</h1>;
}

• JSX 문법: HTML과 JS가 섞여 있지만 생각보다 금방 익숙해짐
• 함수형 컴포넌트 기반, return 안에 모든 UI 정의
• 상태나 이벤트는 useState, useEffect로 제어

처음엔 JSX가 익숙하지 않았지만, 로직과 뷰를 한 파일에서 다룬다는 점에서 편함.

다만 스타일이나 상태관리를 직접 구성해야 할 부분이 많아서, 규모가 커지면 구조 설계가 중요해짐.

 

Vue (Options API 방식)

<template>
  <h1>{{ message }}</h1>
</template>

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

• HTML, JS, CSS가 한 파일(.vue)에 나뉘어 있음
• data, methods, computed 등으로 명확히 역할 분리
• 입문자 입장에서는 문법이 가독성이 좋고 익히기 쉬움

Vue는 진입장벽이 가장 낮았음.

Vue 파일 하나만으로도 컴포넌트 구성이 직관적이라 “이해 → 작성” 흐름이 자연스러움.

 

Angular (TypeScript 기반)

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
  title = 'Hello, Angular';
}

• 클래스 기반 컴포넌트
• 데코레이터(@Component)를 사용한 선언형 구성
• TypeScript 강제, DI(의존성 주입) 등 학습량이 많음

Angular는 처음에 진입장벽이 높아 어려웠음.

대신에 일단 구조를 익히고 나면 대규모 시스템에서 유지보수나 모듈화가 훨씬 수월하다고 느낌.

 

2. 상태 관리 방식

React

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

• useState, useReducer 등 Hook 기반
• 상태는 로컬에서 관리되며, 전역 상태는 Redux, Recoil, Zustand 등 별도 도입 필요

React는 직관적이지만, 상태관리 도구를 어떤 걸 쓰느냐에 따라 설계가 갈림.

그만큼 자유롭고 유연하지만, 팀마다 규칙을 잘 정하지 않으면 난잡해짐.

 

Vue

import { ref } from 'vue';

const count = ref(0);

• Vue 3부터는 Composition API로 ref, reactive 사용
• 전역 상태는 Pinia, Vuex 사용 가능

Vue는 컴포넌트 내에서는 ref, reactive 조합이 매우 간편함.

Composition API는 React의 Hook과 유사하지만 더 선언적이고 깔끔한 느낌이 있음.

 

Angular

count: number = 0;

increment() {
  this.count++;
}

• 컴포넌트 클래스에 상태를 멤버 변수로 선언
• 서비스로 전역 상태를 공유하는 방식 (DI 기반)

Angular는 상태보다는 데이터 흐름의 의존성 관리에 집중된 구조라, 간단한 상태조차도 처음엔 조금 번거롭게 느껴짐.

하지만 서비스를 통한 전역 상태 관리가 명확하고 예측 가능해서, 규모가 커질수록 강점을 느끼게 됨.

 

3. 컴포넌트 커뮤니케이션 (props, emit)

프레임워크	부모 ->자식	자식 -> 부모
React	props	콜백 함수 전달 후 실행
Vue	props	$emit('이벤트명') 사용
Angular	@Input()	@Output() + EventEmitter

Vue는 emit으로, Angular는 EventEmitter로 처리해야 하지만, 코드 명시성이 더 높음.

처음엔 귀찮았지만, 이후 유지보수나 협업에선 오히려 도움이 됨.

 

4. 라우팅과 상태 관리 - “직접 vs 내장”

항목	React	Vue	Angular
라우팅	react-router 별도 사용	vue-router	@angular/router 내장
상태관리	Redux, Recoil 등 외부	Vuex, Pinia 등 외부	서비스 기반, RxJS 기반

React는 모든 걸 직접 선택해야 해서 초기 설계 자유도가 높지만 어렵기도 함.

Angular는 반대로 모든 것이 내장되어 있어 일관성은 뛰어나지만 유연성은 떨어짐. Vue는 그 중간.

 

5. 내가 느낀 정리

프레임워크	장점	단점	추천 상황
React	유연하고 생태계가 활발	설계 의존도 높음, 상태관리 직접 조율 필요	커스터마이징 많은 SPA
Vue	배우기 쉽고 직관적	대규모 시스템 설계에는 한계가 있음	빠르게 만들어야 하는 프로젝트
Angular	일관된 구조, 기업용 시스템에 최적화	진입장벽 높고 설정이 복잡함	대규모 프로젝트, 팀 개발

마무리

React, Vue, Angular는 단순히 문법만 다른 게 아니라 철학과 아키텍처가 전혀 다른 도구입니다.

저는 처음엔 Vue로 입문해서 React로 전환했고, 이후 Angular를 배우면서 구조적인 개발을 느꼈습니다.

결국 중요한 건 “무엇이 더 좋다”보다 “지금 내 프로젝트와 팀에 어떤 게 더 맞는가”입니다.