궁극적인 JavaScript 프레임워크의 비교: Angular와 React

거의 매일 받는 질문은 ReactJS 또는 Angular로 시작해야 한다는 것입니다. 그러나 더 진행하기 전에 면책 조항을 드리겠습니다.

어느 쪽을 비난하거나 항상 다른 쪽을 사용해야 한다고 말하는 블로그가 아닙니다. 모든 개발자와 모든 프로젝트는 완전히 다르고 요구 사항도 다르기 때문에 항상 ReactJS를 사용하거나 항상 Angular를 사용해야 한다고 말하는 것은 정말 어리석은 일입니다.

논리적 주장

Angular는 프레임워크이고 React는 기술적으로 그 자체로 라이브러리라고 주장할 수 있습니다. 이 사실을 부정하는 것은 아니지만, 지금 당장은 말하고 싶지 않은 주장입니다. Angular와 직접 경쟁하는 프레임워크로 변환하는 React에 추가할 수 있는 패키지가 있습니다. 우리는 정확한 프레임워크와 정확한 라이브러리가 아니라 두 생태계를 비교하고 있습니다.

학습 곡선

Angular부터 시작하겠습니다. 또 다른 면책 조항: Angular라고 하면 AngularJS가 아니라 Angular 4에 대해 이야기하는 것입니다.

Angular는 강력하고 많은 것을 포함하는 큰 프레임워크입니다. 배울 것이 많습니다. 의존성 주입, 지시문 데코레이터, 파이프 등과 같은 위협적인 새로운 어휘를 많이 듣게 될 것입니다. 그런 다음 JavaScript와 정적 타이핑을 포함한 많은 다른 기능인 Typescript를 처리해야 합니다.

Angular는 React보다 더 독단적입니다. React를 사용하면 같은 일을 백만 가지 다른 방식으로 할 수 있기 때문에 제 생각에는 이점 중 하나입니다. Angular를 사용하면 일반적으로 특정 작업을 수행하는 한 가지 또는 두 가지 방법이 있으므로 더 쉽게 수행할 수 있고 수행해야 하는 작업에 대한 훨씬 더 명확한 지침을 제공합니다.

그러나 다시, 그것은 선호로 귀결됩니다. 다양한 방식으로 작업을 수행할 수 있는 유연성을 원할 수 있습니다. 내가 언급했듯이 ReactJS는 핵심 라이브러리에 대해 이야기하는 경우 라이브러리입니다. Angular 프레임워크보다 훨씬 작고 배우기 쉽습니다. 더 짧은 시간에 React를 배울 수 있다고 말할 수 있습니다. React는 그 자체로 훌륭한 뷰 라이브러리이지만 대규모 애플리케이션에서는 그다지 강력하지도 않습니다. React에서 라우팅, 유효성 검사, HTTP 요청을 원하면 다른 패키지를 설치해야 하며 이는 학습 곡선에 추가됩니다.

서로 다른 두 개발자의 React 코드를 보면 HTTP 요청을 하든 상태 및 속성을 처리하든 완전히 다르게 보일 것입니다. 그 모든 것은 매우 다르게 처리될 수 있으며 많은 경우 잘못된 방식으로 처리될 수 있습니다.

모범 사례와 모든 문제가 사라지지만 학습 곡선에 추가됩니다.

Angular React와 달리 템플릿을 사용하지 않습니다. JSX 또는 JavaScript 확장 또는 JavaScript 구문 확장이라고 하는 것을 사용하여 JavaScript에 HTML을 포함할 수 있습니다. 처음에는 이것이 조금 이상하게 보일 수 있습니다. 특히 마크업과 JavaScript를 분리하는 방법을 배웠을 때.

몇 가지 다른 변경 사항이 있는 JavaScript 내부에 HTML을 넣는 것과 같다고 생각하십시오. class 속성을 사용할 수 없고 클래스 이름을 사용해야 합니다.

마지막으로 Redux가 있습니다. React는 종종 애플리케이션 레벨 상태 관리자인 Redux 또는 Flux와 함께 사용됩니다. 제 생각에 Redux는 설정만 하고 개념을 배우는 것이 어렵습니다.

나는 그것이 과도하게 사용되었다고 생각합니다. 많은 개발자들이 필요하지 않은 곳에 redux를 사용한다고 생각합니다. 작은 응용 프로그램에는 필요하지 않지만 많은 개발자가 사용을 주장합니다. 그것은 다시 선호로 귀결됩니다. Redux는 매우 강력합니다. 저는 그것을 없애고 싶지 않습니다. 학습 곡선에 대해 이야기할 때 이해하기 매우 어렵습니다.

승자: 동점입니다

성능

Angular와 React의 성능을 직접 비교하는 것은 공정하지 않습니다. Angular는 라우팅, 양식 도구, HTTP 라이브러리, Reactive 확장 등을 포함하는 완전한 앞뒤 프레임워크입니다. 이러한 모든 기능은 프레임워크를 부풀리고 속도를 늦춥니다. 그러나 React는 그 자체로 훨씬 작고 빠른 뷰 라이브러리일 뿐입니다.

라우터, HTTP 클라이언트 또는 React 애플리케이션에 추가할 패키지와 같은 패키지를 추가하기 시작하면 Angular가 있는 위치에 조금 더 다가가기 시작하고 공정한 비교를 시작할 수 있지만 그 후에도 React는 여전히 퍼포먼스 부문 우승. 일반적으로 매우 빠른 기술입니다.

후드 아래에서 Angular 2에서 Angular 4로 변경하여 성능을 향상시키기 위해 상당한 노력을 기울였습니다. Angular 4는 Angular 2보다 성능이 좋습니다. 그럼에도 불구하고 React는 여전히 성능 부문에서 승리합니다.

앵귤러 대 리액트. 출처: Academind.com

승자: 리액트

특징

두 프레임워크 모두 동일한 일반 기능과 이점을 많이 가지고 있습니다. 코드를 구성하고, 구성 요소 기반이며, 동적 마크업을 제공하는 등 같은 기능이 많다.

몇 가지 개별 기능을 살펴보겠습니다. Angular는 분명히 핵심에 React보다 훨씬 더 많은 기능을 가지고 있습니다. 다시 말씀드리지만, 우리는 React와 함께 사용되는 두 가지 생태계와 공통 패키지에 대해 이야기하고 있습니다.

Angular는 모두 포함된 프레임워크입니다. 구성 요소 라우터, 관찰 가능 항목에 대한 반응 확장, HTTP 클라이언트, 유효성 검사를 위한 양식 모듈과 함께 제공되며 목록은 계속됩니다. 또한 다른 프레임워크에서는 실제로 제공하지 않는 방식으로 양방향 데이터 바인딩을 제공합니다. 뷰에서 모델로 데이터를 바인딩하는 것은 ng 모델 지시문을 사용하여 매우 쉽습니다.

Angular는 또한 MVC(모델 보기 컨트롤러) 또는 최소한 해당 디자인 패턴과 다른 측면을 지원합니다. 또한 테스트를 쉽게 구현할 수 있는 기능(단위 테스트 및 종단 간 테스트)도 함께 제공됩니다. Angular는 엔터프라이즈 수준의 프론트엔드 애플리케이션을 구축하기 위한 기능으로 가득 차 있습니다. 반면에 React는 핵심에 많은 것을 포함하지 않습니다. 그러나 Angular에 기본 제공되는 기능과 몇 가지 추가 기능을 추가할 수 있습니다.

React는 매우 강력한 가상 DOM을 사용합니다. 실제 Dom의 자체 경량 버전을 만들고 전체를 새로 고치는 대신 필요한 것만 포함하고 업데이트합니다. Virtual DOM은 React가 엄청나게 빠른 주요 이유입니다.

React는 원하는 모든 유형의 JavaScript를 절대적으로 넣을 수 있기 때문에 표준 템플릿보다 강력한 JSX를 사용합니다. JSX는 React를 사용하는 데 필요하지 않지만 작업을 훨씬 쉽게 만듭니다. Angular와 함께 JSX를 사용하지 않을 이유가 없습니다. React는 또한 구성 요소의 상태와 속성을 관리하는 일을 정말 잘합니다. 데이터를 사용하고 구성 요소 간에 전달하기가 정말 쉽습니다. 구성 요소 간에 데이터를 전달할 때 Angular는 React에서 수행하는 것보다 훨씬 어렵습니다.

Core React는 앱 수준 상태를 유지하기 어렵습니다. 구성 요소 상태는 쉽지만 진정한 앱 수준 상태 관리를 원한다면 Redux 또는 Flux가 필요할 것입니다. 앞에서 말했듯이 배우기가 꽤 혼란스럽습니다. 새로운 React 라우터 버전 4와 같이 자주 사용되는 외부 패키지는 이해하기가 조금 어렵지만 실행 및 설정하는 방법을 배우면 매우 강력합니다. 활용하는 방법도 다양합니다. React에는 Angular와 같은 핵심 HTTP 구성 요소가 없지만 외부 HTTP 클라이언트인 Fetch 또는 Axios를 사용할 수 있으며 Enzyme은 React를 증명하는 데 널리 사용됩니다. 실제 라이브러리의 일부는 아니지만 React와 함께 일반적으로 사용되는 몇 가지 다른 패키지가 있습니다.

두 기술 모두 많은 기능을 공유하지만 핵심 기술만 비교한다면 Angular가 승자입니다.

승자: 앵귤러

압형

Angular와 React에는 꽤 멋진 명령줄 인터페이스가 있습니다. Angular CLI와 Create React App은 모두 매우 훌륭하며 개발을 간소화할 수 있습니다. Angular CLI는 구성 요소 및 서비스와 같은 것을 빠르게 생성할 수 있기 때문에 조금 더 강력합니다. Create React는 그렇게 할 수 없습니다. 파일과 기본 구조까지 모든 것을 직접 만들어야 합니다. 두 시스템 모두 웹 팩을 사용하고 자체 자동 로딩 개발 서버가 있으며 컴파일 및 빌드 도구가 있습니다. 분명히 Angular에는 Typescript를 변환하는 추가 작업이 있습니다. CLI에는 ng serve를 실행할 때 스크립트가 있습니다. 무대 뒤에서 일어난 모든 일. 이를 위해 TSC 또는 Typescript Compiler라는 것을 사용하며 둘 다 테스트 도구도 있습니다. Create React App은 테스트를 위해 Jest를 사용하며 이러한 도구의 일부 중 하나는 프로덕션 환경에서 애플리케이션을 정적 자산으로 구축하는 기능입니다. 이 자산은 단순히 서버에 업로드하거나 백엔드 클라이언트 폴더에 저장할 수 있습니다.

풀 스택 애플리케이션이라면 이것들이 정말 중요합니다. 당신은 그들을 사용할 필요가 없습니다. 웹 팩을 사용하여 처음부터 React 애플리케이션을 빌드할 수 있습니다. 이렇게 하면 애플리케이션을 빌드할 뿐만 아니라 프로덕션을 위해 컴파일하고 빌드하는 것이 훨씬 쉬워집니다.

그 부서에서도 둘 다 예쁘다.

승자: 앵귤러

생태계

내가 말했듯이 이 두 기술에는 이제 웹 브라우저를 훨씬 뛰어넘는 자체 생태계가 있습니다.

Ionic은 모바일 앱용 기본 래퍼 내에서 실행되는 Angular 애플리케이션인 인기 있는 하이브리드 프레임워크입니다. Angular를 사용하여 모바일 앱을 만들 수 있습니다. 하이브리드 앱은 네이티브 애플리케이션에 비해 다소 투박할 수 있습니다. 사용자 경험은 때로 그다지 빠르거나 반응이 좋지 않을 수 있습니다. 다양한 하이브리드 프레임워크 중 Ionic 3가 가장 좋습니다. 또한 Angular와 JavaScript를 사용하여 진정한 네이티브 앱 iOS 및 Android 앱을 빌드할 수 있는 NativeScript도 있습니다.

그럼에도 불구하고, NativeScript는 적어도 현시점에서 Facebook의 React Native만큼 좋지 않은 것 같습니다. Angular에는 머티리얼 디자인 팬이라면 머티리얼 디자인 구성 요소 라이브러리도 있습니다. Angular Universal은 서버 측에서 Angular를 렌더링하는 데 사용할 수 있는 시드 프로젝트입니다. Reax redux에서 영감을 받은 상태 관리 라이브러리인 NgRx 저장소도 있습니다. 피어 리듀서에 의해 변경된 상태를 기반으로 합니다. 또한 Reactive 확장과의 통합이 있습니다.

눈치채셨을 겁니다. 일단, 그들 중 하나는 다른 복사를 다른 방식으로 수행합니다. React와 Angular는 JavaScript 프레임워크의 Microsoft와 Apple이 되었습니다.

React에는 상당한 생태계가 있습니다. 그것은 인기있는 React 네이티브를 가지고 있습니다. 웹 기술로 모바일 앱을 구축하는 가장 좋은 방법입니다. React Native는 빠르며 올바르게 구축된 경우 많은 애플리케이션이 Swift 또는 Java를 기반으로 구축된 네이티브 앱과 함께 바로 위에 있습니다. React에는 Angular의 머티리얼 디자인 구성 요소와 비슷하지만 더 성숙한 Material-UI라는 머티리얼 디자인 라이브러리가 있습니다. JS는 서버 측 React 애플리케이션을 렌더링하기 위한 프레임워크입니다. Angular Universal과 비교할 수 있도록 가능한 가장 간단한 방법으로 이 작업을 수행하는 것을 목표로 합니다. MobX는 상태를 관리하는 또 다른 방법입니다. redux와 약간 다르게 작동합니다. 옵저버블과 옵저버를 정의하는 데코레이터 세트를 제공하고 State에 Reactive 로직을 도입합니다.

Storybook은 React를 위한 개발 환경입니다. 이를 통해 구성 요소 라이브러리를 탐색하고, 각 구성 요소의 다양한 상태를 보고, 구성 요소를 대화식으로 개발 및 테스트할 수 있습니다. Reactive VR은 React를 가상 현실로 만들고 있습니다. React 데스크탑은 많은 macOS 및 Windows 10 구성 요소를 특징으로 하는 기본 데스크탑 경험을 웹에 제공하는 것으로 추정되는 Reacts 라이브러리 위에 구축된 JavaScript 라이브러리입니다. React 생태계는 매우 크고 강력합니다. React는 기술의 모든 측면에 적용되고 있으며 확실한 승자입니다.

승자: 리액트

양복과 넥타이 차림의 사람들은 Angular를 사용하고 있고 엉성한 수염을 가진 힙스터들은 React를 사용하고 있습니다.

결론: 넥타이다

이러한 프레임워크 중에서 결정하는 경우 다양한 범주를 살펴보고 관심 있는 항목을 확인하십시오. 둘 다 시도해보고 어느 것이 더 빨리 선택되는지 확인하십시오. 이 블로그보다 더 많은 연구를 하십시오. 한 블로그에서 필요한 모든 정보를 얻을 수는 없으므로 좀 더 읽어보십시오.

네이티브 모바일 앱 개발을 포함하는 더 큰 생태계를 찾고 있다면 두 번 생각하지 않고 React를 선택하십시오. 기능을 추구한다면 Angular는 거대합니다. 필요한 것보다 더 많은 기능이 있습니다.