React vs Angular: 차이점과 언제 무엇을 고를까

React는 사용자 인터페이스를 만드는 자바스크립트 라이브러리이고, Angular는 웹 애플리케이션을 만드는 완전한 프레임워크입니다. React에서는 JSX를 반환하는 함수로 컴포넌트를 작성하고 라우팅, 폼, 데이터에 별도의 도구를 고릅니다. Angular에서는 HTML 템플릿을 가진 TypeScript 클래스를 작성하고 라우팅, 폼, HTTP 클라이언트, 의존성 주입을 기본으로 받습니다. 다음은 두 방식으로 작성한 같은 카운터입니다.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

같은 컴포넌트의 Angular 버전입니다.

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

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

개념은 일대일로 대응합니다. React의 useState(0)은 Angular의 signal(0), onClick={...}은 (click)="...", {count}는 {{ count() }}입니다. 차이는 코드가 사는 곳입니다. React에서는 마크업을 반환하는 함수 하나이고, Angular에서는 클래스와 템플릿 문자열입니다.

라이브러리와 프레임워크

나머지 대부분의 차이를 만드는 차이입니다. React는 렌더링과 컴포넌트 state를 다룹니다. 그 밖의 모든 것은 직접 고릅니다.

• 라우팅: React Router, TanStack Router, 또는 프레임워크의 파일 기반 라우트.
• 데이터 가져오기: 이펙트 안의 fetch, TanStack Query, 또는 프레임워크의 로더와 서버 컴포넌트.
• 폼: 일반 제어 input, React 19 폼 액션, 또는 React Hook Form.
• 전역 state: 컨텍스트, Zustand, Redux Toolkit, Jotai.

많은 팀이 라우팅, 데이터 로딩, 서버 렌더링을 묶어 주는 Next.js나 프레임워크 모드의 React Router 같은 React 프레임워크로 시작해서 이런 선택 대부분을 건너뜁니다.

Angular는 이런 선택을 대신 해 줍니다. @angular/router, 반응형 폼과 템플릿 기반 폼, HttpClient, 의존성 주입, 테스트 설정, 그리고 컴포넌트와 서비스를 생성하는 ng CLI입니다. 모든 Angular 프로젝트가 대체로 비슷해 보이며, 큰 조직이 Angular를 고르는 흔한 이유입니다. 대가는 배울 범위가 더 넓고 부품 하나를 바꿔 끼울 자유가 적다는 것입니다.

JSX와 템플릿

React 컴포넌트는 자바스크립트인 JSX를 반환합니다. 조건은 &&나 삼항 연산자이고, 목록은 .map()이며, 자바스크립트로 할 수 있는 것은 마크업에서도 할 수 있습니다. Angular 템플릿은 자기만의 문법을 가진 HTML입니다. @if, track을 쓰는 @for, [property] 바인딩, (event) 바인딩, {{ }} 보간입니다. 템플릿은 마크업과 로직을 눈에 띄게 분리하고, JSX는 둘을 한곳에 두면서 언어 전체를 쓰게 해 줍니다. 다음은 비교할 두 번째 기능인 필터링된 목록입니다.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

입력창에 an을 입력하고 콘솔을 보세요. 키를 누를 때마다 함수 전체가 다시 실행되고, visible은 그냥 다시 계산됩니다. 템플릿을 별도 파일에 둔 Angular의 같은 컴포넌트입니다.

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

Angular에서는 computed가 visible이 query에 의존한다고 선언하므로, Angular는 어떤 템플릿이 그것을 읽는지 알고 query가 바뀔 때만 visible을 다시 계산합니다. React에는 선언이 없습니다. 컴포넌트가 다시 실행되며 다시 계산합니다. React의 key={fruit}와 Angular의 track fruit은 같은 일, 즉 어느 목록 항목이 어느 항목인지 프레임워크에 알려 주는 일을 합니다.

자바스크립트 우선과 TypeScript 우선

React는 JSX를 가진 일반 자바스크립트이며, TypeScript는 추가하는 선택 사항입니다(npm create vite@latest my-app -- --template react-ts). 대부분의 새 React 프로젝트는 TypeScript를 추가하지만, 타입을 몰라도 React를 배울 수 있습니다. Angular는 TypeScript를 위해 만들어졌습니다. 데코레이터, 의존성 주입, 템플릿 타입 검사기 모두 TypeScript를 전제로 합니다. 팀이 이미 타입이 있는 코드를 쓴다면 문제가 되지 않지만, 프로그래밍이 처음이라면 한 번에 배울 것이 하나 더 늘어납니다. React와 TypeScript 페이지에서 React 쪽의 타입 지정 방식을 보여 줍니다.

데이터 흐름과 변경 감지

둘 다 입력(React에서는 props, Angular에서는 input()이나 @Input())으로 데이터를 내려보내고, 콜백(React에서는 props로 넘긴 함수, Angular에서는 output()이나 @Output())으로 이벤트를 올려보냅니다. 차이는 각각이 변경을 알아차리는 방식입니다.

React는 state를 불변 스냅샷으로 다룹니다. 새 값으로 setter를 호출하면 React가 컴포넌트 함수를 다시 실행하고, 새 JSX를 이전 것과 비교하고, DOM을 고칩니다. 자동으로 추적되는 것은 없습니다. 렌더 함수가 곧 의존성 그래프입니다. 이해하기 쉽지만, 작업을 건너뛰려고 가끔 memo, useMemo, useCallback을 추가해야 한다는(또는 React Compiler가 추가하게 해야 한다는) 비용이 있습니다.

Angular는 예전에 Zone.js로 모든 비동기 이벤트를 감지한 다음 컴포넌트 트리에서 바뀐 바인딩을 확인했습니다. 최신 Angular는 시그널로 옮겨 가고 있습니다. signal, computed, effect가 각 템플릿이 읽는 값을 추적하므로 Angular는 시그널이 바뀐 컴포넌트만 확인하며, 최근 버전은 Zone.js 없이 완전히 동작할 수 있습니다. Angular 템플릿은 React 컴포넌트처럼 변경마다 함수 전체를 다시 실행하지 않습니다.

일상적인 코드에서는 메커니즘이 암시하는 것보다 둘이 더 비슷하게 느껴집니다. state를 보관하고, 그것에서 값을 파생시키면, 화면이 따라옵니다.

state 관리

React에서 지역 state는 useState나 useReducer이고, 공유 state는 부모로 끌어올리거나 컨텍스트에 넣으며, 앱 전체 state는 작은 스토어 라이브러리에 있는 경우가 많습니다. Angular에서 지역 state는 컴포넌트의 시그널이고, 공유 state는 보통 필요한 곳마다 주입되는 서비스에 있습니다. 의존성 주입은 "멀리 떨어진 두 컴포넌트가 어떻게 데이터를 공유하나"에 대한 Angular의 내장된 답입니다. Redux 스타일의 스토어를 원하는 팀을 위해 NgRx가 있습니다. React에는 의존성 주입 시스템이 없으며, 컨텍스트가 비슷한 역할을 합니다.

비교표

학습 곡선

React는 시작이 더 빠릅니다. 자바스크립트를 아는 초보자는 컴포넌트, props, state, 이펙트를 배운 뒤 실제로 무언가를 만들 수 있으며, React란 페이지가 몇 분 만에 전체 개념을 다룹니다. 배울 것은 뒤로 미뤄질 뿐입니다. 라우터, 데이터 가져오기 방식, 폼 전략을 골라야 하고, React 코드베이스마다 다른 선택을 합니다.

Angular는 시작이 더 가파릅니다. TypeScript, 데코레이터, 템플릿, 시그널, 의존성 주입, 라우터와 폼 모듈, 그리고 일부 API를 위한 RxJS입니다. 하지만 일단 익히면 모든 Angular 프로젝트가 같은 부품을 같은 방식으로 쓰므로 프로젝트 사이를 옮겨 다니기가 더 쉽습니다.

언제 무엇을 고를까

다음과 같을 때 React를 고르세요.

• 작은 코어와 나머지를 고를 자유를 원하거나, 서버 렌더링과 파일 기반 라우트를 위해 Next.js 같은 프레임워크를 원할 때.
• 같은 컴포넌트 모델을 재사용하는 React Native로 모바일 앱도 만들 계획일 때.
• 팀이 주로 자바스크립트에 익숙하거나, 프론트엔드 개발을 배우면서 동작하는 앱까지 가장 짧은 길을 원할 때.

다음과 같을 때 Angular를 고르세요.

• 큰 팀이 여러 프로젝트에 걸쳐 하나의 표준 구조를 필요로 하고, 논쟁할 아키텍처 결정이 적기를 원할 때.
• 폼, HTTP, 라우팅, 의존성 주입을 한 팀이 함께 관리하고 CLI가 함께 업그레이드해 주기를 원할 때.
• 팀이 이미 TypeScript를 쓰고, 클래스 기반 서비스와 템플릿과 로직의 명확한 분리를 좋아할 때.

둘 다 성숙했고, 프로덕션에서 널리 쓰이며, 커리어에 도움이 됩니다. 기술은 서로 옮겨 갑니다. 컴포넌트, 단방향 데이터 흐름, 파생 state, 반응형 업데이트는 둘에서 같은 개념입니다.