React, Angular, Vue.js 란?

ImOk·2021년 12월 2일

👩‍💻 웹 개발

목록 보기

3/14

자바스크립트 기반 웹 프론트엔드 프레임워크인 React, Vue.js, Angular가 무엇이고, 어떤 차이점이 있는지 조사해 보았다.

💡 html, css, javascript를 이용해서 웹 페이지를 만들 수 있지만, 과거와 달리 프레임워크를 이용한 개발이 필수로 여겨지고 있다고 한다!! (세 가지 프레임워크 모두 MIT 라이선스를 채택하고 있고, MIT 라이선스는 독점 소프트웨어에서도 재사용에 대한 제한이 없다.)

🔗사용 중인 웹 프레임워크에 대한 StackOverflow의 개발자 설문조사 결과(2021년)
https://insights.stackoverflow.com/survey/2021

💡 React

페이스북의 개발자 Jordan Walke가 처음 만든 웹 프론트엔드 프레임워크.
웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리

단방향 데이터 흐름

양방향보다 데이터를 감지하는데 부담이 적고, 단순한 데이터 흐름으로 이해가 쉽다.

선언형 (Declarative) 프로그래밍

Component를 얻기 위해 <tag></tag> jsx 문법을 통해 구현한다.

Component 기반 구조로 재생산성이 뛰어나다.

Component는 독립적인 단위의 소프트웨어 모듈을 말한다.

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.

따라서 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다시 사용할 수 있게 유지보수에도 편리하다.

Virtual DOM 기반 구조로 가볍다.

DOM(Document Object Model)의 약자

DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.

브라우저의 리소스를 사용하지 않고 효율적으로 DOM을 업데이트 하게 한다.

Props and State

Props : props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용
- 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다

State : state는 컴포넌트 자기 자신이 가지고 있는 값
- State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
- 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다
- 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적.

💡 Angular

Google Angular팀이 만든 타입스크립트(TypeScript) 기반 오픈소스 프레임워크
Angular는 Angular JS의 후속 버전 (Angular1 버전 : Angular JS, Angular2 버전 이상 : Angular )
러닝커브(Learning Curve)가 가팔라서 React나 Vue.js에 밀려 인기도가 낮은 편

완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공

React나 Vue.js가 일반적으로 프레임워크라고 불리지만 실제로는 Javascript 라이브러리에 가까운 구성인데 반해, Angular의 경우 프론트 개발에 필요한 모든 요소를 다 갖추고 있는 프레임워크라고 할만하다.

MVVM(Model-View-ViewModel)패턴을 채택한다.

전통적인 MVC 구조에서 컨트롤러가 뷰 모델로 대체된 구조로 각 뷰와 뷰 모델이 보다 밀접한 관계

양방향 데이터 바인딩

화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경

Angular를 조사하면서 느낀거지만, ~~미움 받는 프레임워크~~임이 분명하다.. 😥

💡 Vue.js

Google의 전 개발자 Even You가 만든 오픈소스 자바스크립트(Javascript) 프레임워크
React의 장점인 Virtual Dom과 Angular의 양방향 바인딩을 가져왔다는 점에서 볼 때 앞으로도 발전을 기대해 볼 만한 프레임워크

MVVM(Model-View-ViewModel)패턴 을 채택

화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있다.

컴포넌트 기반 프레임워크

컴포넌트 기반의 프레임워크를 사용함으로써 코드의 재사용성이 향상 된다.

'단일 파일 컴포넌트'라는 .vue 확장자를 가지는 파일을 사용

React와 Angular의 장점을 가진 프레임워크

Angular 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크

React와 처럼 Virtual DOM 을 사용

Angular처럼 HTML 마크업 기반의 템플릿 문법을 사용