웹

React, Angular, Vue.js

Volc 2022. 1. 8. 00:45

React

  • 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
  • 싱글 페이지 어플리케이션이나 모바일 어플리케이션 개발에 사용될 수 있다.
  • 대규모 또는 복잡한 리액트 어플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
  • 쉽게 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다.
  • 특징
    • Data Flow
      • React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 갖는다.
      • Angular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 한다.
    • Component 기반 구조
      • Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
      • React는 UI(View)를 여러 컴포넌트로 쪼개서 만든다.
      • 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다. 그러므로 유지보수 관리가 용이해진다.
    • Virtual DOM
      • DOM은 Document Object Model의 약자로 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다.
      • Virtual DOM은 가상의 Document Object Model을 말한다.
      • 이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 한다.
    • Props and State
      • Props
        • 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
        • 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props는 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
      • State
        • 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
        • State는 동적인 데이터를 다룰 때 사용하며 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
        • 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

AngularJS

  • 단일 페이지 어플리케이션 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)이다.
  • 자바스크립트에서 처리하던 부분의 많은 부분을 HTML 템플릿 내로 가져오면서 자바스크립트는 단순화 되고, 데이터의 바인딩도 자유로워서 많은 편리함을 가져다 주었다.
  • 특징
    • 완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공한다.
    • TypeScript를 사용한다.
    • 모듈과 컴포넌트 기반으로 동작한다.
    • 웬만한 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공한다.(라우팅, HTTP, Form 등)

Vue.js

  • 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크
  • 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
  • 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로 제공
  • Angular의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 갖고 있음
  • 특징
    • 문법이 간편하고 작성하기 쉬움
    • 기존 HTML 템플릿을 그대로 활용
    • 다양한 라이브러리와 프레임워크를 사용하여 확장 가능
    • Virtual DOM 사용
    • MVVM 패턴
      • Model-View-ViewModel의 약자로 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴
      • 일반적으로 웹은 HTML DOM이 View, 자바스크립트가 Model의 역할을 하게 되는데, MVVM 패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해 만들어졌다.
      • DOM
        • HTML 문서에 들어가는 요소(태그, 클래스, 속성, ..)의 정보를 담고 있는 데이터 트리
      • DOM Listener
        • 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
      • Model
        • 데이터를 담는 용기
        • 보통 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
      • Data Binding
        • 뷰에 표시되는 내용과 모데르이 데이터를 동기화
      • View Model
        • 뷰와 모델의 중간 영역.
        • Dom Listener와 Data Binding을 제공하는 영역
      • Component
        • 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것으로 미리 정의된 옵션을 가진 Vue 인스턴스

차이점 및 정리

  • Angular
    • Angular는 app 개발에 필요한 모든 것을 제공하기 때문에 Learning Curve가 상당히 높다. TypeScript, MVC 외에도 Angular 내부의 동작 메커니즘, 제공하는 기술들도 알아야 한다.
  • Vue
    • Vue는 Angular나 React보다 상대적으로 배우기 쉽고 두 프레임워크로부터 Component와 같은 기능들을 채택하여 사용하고 있기 때문에, 두 프레임워크로부터 Vue로 변경이 쉬운 편이다. 그러나 Vue의 단순성과 유연성은 안 좋은 코드나 테스트와 디버깅을 힘들게 하는 양날의 검이 될 수 있다.
  • React
    • Guide 문서가 상당히 잘 되어 있으며, 대부분의 문제도 Stackoverflow에 올라와 있다. React는 Angular와 달리 완전한 프레임워크가 아니라서 추가적인 기능들에 대해 third-party 라이브러리가 필요하다.

참고 사이트

[React] React.js란? (간단 정리)

앵귤러(Angular) 란? 특징 및 장단점

[Vue]Vue.js란?

점프 투 파이썬

Angular vs React vs Vue

저작자표시 (새창열림)