React vs Angular

React vs Angular

전성기의 젊은이 vs 황혼기의 늙은이

• React

  Made in Facebook

  프레임워크가 아닌 라이브러리

  Class 형과 Functional 형을 동시 지원(Functional 이 공식)

  • 특징

    1. Just the UI

       오직 UI 컴포넌트, 즉 View 를 만들기 위한 라이브러리

    2. Virtual DOM

       DOM Tree 를 직접 조작하는 것이 아닌 Virtual DOM 을 사용하고 있어서 리렌더링이 빠름

    3. One Way Data-Flow

       데이터의 단방향 흐름을 지향함

       이벤트를 통해 하위 컴포넌트의 변화를 감지하는 특성을 갖춤

• Angular

  Made in Google

  프레임워크

  class 형이 default

  • 특징

    1. Two Way Data-Binding

       Model 과 View 데이터를 연결하여 양방향 데이터 바인딩이 가능함

    2. Dependency Injection

       컴포넌트들 간의 서비스 사용 및 의존성 관리가 용이하고 컴포넌트 테스트 하기 쉬움

    3. Directives

       자신의 용도에 맞게 커스텀 HTML tag 제작하여 사용 가능 (React 에서도 Styled-components 로 가능)

• Angular vs React

  1. TypeScript

     Angular 는 강제되는 한편 React 는 강제되지 않음

     개발자의 유연성을 더 두느냐, 덜 두느냐의 차이

  2. 컴포넌트

     Angular 의 경우 컴포넌트와 Template(Django 나 Java 의 Template 같은 구조) 를 동시에 가짐

     React 는 JSX 라는 템플릿과 JS 가 연결되어 구조와 기능이 하나로 묶여 동작함 (container 와 component 로 분리해서 구조, 기능 분리 가능)

  3. MVC 패턴에서의 데이터 통신

     Angular 는 RxJS 를 사용하여 양방향 데이터 바인딩함

     초기에는 장점으로 받아들여졌지만 흐름이 난잡해지고 복잡도가 상승하는 문제가 발생

     React 는 Flux 패턴을 통해 단방향 데이터를 실시간으로 반영함

  4. 비동기 프로세스

     Angular 는 RxJS 로 비동기 통신을 함 RxJS 는 난해한 개념으로 인해 러닝커브가 완만함

     React 는 Redux, Context API 등을 사용하여 상태관리 및 데이터 통신을 함 Redux 는 초기 러닝커브는 완만한 편이지만 대규모 App 에서 모듈로 관리하기 쉬움

• 결론

  유연하고 함수형 가능하며 단방향 데이터 흐름(flux) 인 React 가 최고시다!