Angular vs React vs Vue
개발자는 항상 적절하며 근거있는 선택을 해야한다.
프론트의 프레임워크는 크게 Angular, React, Vue 가 있다.
현재 대부분의 학원들은 프론트엔드는 React 로 가르치고 있다.
이 글은 왜 리엑트를 사용해야하는가 에 대한 궁금증으로 작성한다.
각 프레임워크는 구성 요소 기반이고 UI 기능을 빠르게 생성할 수 있다.
그러나 모두 구조와 아키텍처가 다르다.
1. Angular
Angular 는 TS 를 기반으로 하는 프레임워크이다. 평소 좋아하는 백엔드 프레임워크인 Nest.js 가 Angular 에 영감을 받아 만들어졌다.
이는 MVC(Model-View-Controller) 프레임워크이다. 각 Angular 애플리케이션에는 적어도 하나의 루트 구성 요소와 하나의 루트 모듈이 존재한다.
Angular 의 각 구성 요소에는 템플릿, 애플리케이션 논리를 정의하는 클래스 및 메타데이터(데코레이터)가 포함되어 있다. 구성 요소의 메타데이터는 뷰를 만들고 표시하는데 필요한 구성 요소를 찾을 수 있는 위치를 Angular 에게 알려준다.
Angular 의 템플릿은 HTML로 작성되지만 특히 반응형 데이터를 출력하고 여러 요소를 렌더링하기 위한 특수 지시문이 있는 Angular 템플릿 구문을 포함할 수도 있다.
Angular 의 서비스는 구성 요소에서 데이터 가져오기 또는 입력 유효성 검사와 같은 비즈니스 논리 작업을 위임하는데 사용된다. 이는 Angular 애플리케이션의 뚜렷한 부분이다. Angular 는 사용을 강제하지 않지만 재사용할 수 있는 고유한 서비스 세트로 앱을 구성하는 것이 좋다.
Angular 의 장점은 무엇일까?
- Angular 는 google 의 지원을 받기 때문에 개발자는 대규모 애플리케이션 구축에 대해 높은 신뢰를 가지고 있고, 애플리케이션이 장기적으로 유지될 수 있다. (google 이 버린것도 많기때문에 이는 두고봐야할 것 같다.)
- Angular 의 공식문서는 자세하고 Angular 의 기능과 작동 방식을 잘 설명한다. 개념과 예시는 처음보는 사람에게도 유용한 예를 들고 있다.
- 확정성이 뛰어나다. 사소한 변경을 하더라도 프로젝트의 전체 구조를 업데이트 할 필요가 없다. 또 코드 베이스는 일관성과 가독성이 매우 높아 프로젝트의 효율성이 높아진다.
Angular 의 단점은 무엇일까?
- 학습곡선이 다른 프레임워크에 비해 크다. TS 를 기반으로 하기에 이에 능숙해야한다.
- 프로젝트의 크기
2. React
React 는 특정 프로젝트 구조를 강제하지 않고 아래 코드처럼 단 몇줄의 코드만으로 React 사용을 시작할 수 있다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
React 는 특정 프로젝트 구조를 적용하지 않고 요소를 렌더링 하는 UI 라이브러리로 사용할 수 있으므로 엄밀히 말하면 프레임워크라고 하기 어렵다.
React Elements 는 React 앱의 가장 작은 구성요소이다. React DOM 은 무언가 변경될 때마다 효율적으로 업데이트하기 때문에 실제 DOM 요소보다 더욱 강력하다.
구성 요소는 애플리케이션 전체에서 사용할 독립적이고 재사용 가능한 부분을 정의하는 더 큰 블록이다. props 로 입력을 받아들이고 사용자에게 표시되는 요소를 생성한다.
React 는 JS 를 기반으로 하지만 HTML 과 JS 를 동시에 포함하는 요소를 만들 수 있는 JSX 와 대부분 결합된다.
React 를 사용하는 가장 큰 장점중 하나는 React Native 라는 프레임워크와 동일한 코드베이스를 사용해 웹 뿐만아닌 모바일 애플리케이션을 만들 수 있다는 것이다.
또 컴포넌트를 기반하여 애플리케이션의 재사용성을 높여 개발 시간과 복잡성을 줄여준다.
React 의 장점은 무엇일까?
- 위에서 적은 것 처럼 재사용 가능한 구성 요소들로 인해 복잡성과 코딩의 양이 줄어들고 유지보수도 쉽다.
- React 는 실제 DOM 에 의존하지 않고 메모리 기반의 가상 DOM 을 사용한다. 때문에 성능과 프로그램 속도가 향상된다.
- React 는 러닝커브가 높지 않다. HTML 과 JS 개념을 이제 막 마친 웹 개발자도 쉽게 React 를 배울 수 있다.
React 의 단점은 무엇일까?
- 가장 널리 사용되는 JS 라이브러리이기 때문에 React 는 지속적인 업데이트를 제공하므로 개발자는 새로운 개념을 다시 배워야 한다.
3. Vue
Vue 는 View 레이어에만 중점을 둔다. Vue Router, Vuex 와 같은 공식 및 타사 패키지를 사용해 기능을 확장하여 셀제 프레임워크로 전환할 수 있기 때문에 이를 프로그레시브 프레임워크라고 한다.
Vue 는 MVVM(Model-View-ViewModel) 패턴과 엄격하게 연관되어 있지 않지만 디자인은 부분적으로 영감을 받았다.
Vue 를 사용하면 프레임워크가 최신 뷰를 렌더링 할 수 있는 방식으로 애플리케이션 데이터가 처리되는지 확인하기 위해 주로 ViewModel 계층에서 작업하게 된다.
Vue 의 템플릿 구문을 사용하면 View 구성 요소를 만들 수 있으며 익숙한 HTML 과 특수 지시문 및 기능을 결합한다. 원시 JS 및 JSX 도 지원되지만 이 템플릿 구문이 선호된다.
Vue 의 구성 요소는 작고 독립적이며 애플리케이션 전체에서 재사용할 수 있다.
확장자가 있는 단일 파일 구성 요소(SFC)에는 .vue HTML, CSS 및 JS 가 포함되어 있으므로 모든 관련 코드가 하나의 파일에 있다.
SFC 는 Vue 프로젝트, 특히 대규모 프로젝트에서 코드를 구성하는데 권장되는 방법이다. SFC 를 작동하는 JS 코드로 변환하기 위해서는 Webpack 같은 도구가 필요하다.
Vue 는 초보 개발자가 지루한 학습을 거치지 않고도 쉽게 동적 웹 애플리케이션을 만드는데 중점을 두었다.
Vue 의 장점은 무엇일까?
- React 와 Anguler 는 각각 JS 와 TS 에 능숙해야 한다. 그러나 Vue 는 초보자에게 친숙하며 사전 기술을 요구하지 않는다.
- Vue 프로젝트의 크기는 웹페이지의 SEO에 직접적인 영향을 미치는 등 여러가지 장점이 있다.
- 기술을 선택하는 방향으로 나아갈 때 포럼 및 커뮤니티는 정말 중요하다. Vue 는 이를 갖추고 있다.
Vue 의 단점은 무엇일까?
- Vue 는 생태계가 좁은 편이다. 때문에 이전 버전의 운영 체제 및 웹 브라우저에서는 렌더링되지 않는다.
- Angular 및 React 와 같은 다른 프레임워크는 google 및 facebook 의 지원을 받아 사람들 사이에서 자동으로 신뢰를 구축하지만 Vue 는 일반적이기에 상대적으로 신뢰가 떨어진다.
전체 비교
| Anguler | React | Vue | |
| 출시일 | 2016년 | 2011년 | 2014년 |
| 지원 | 지역사회 | ||
| 크기 | 중간 | 작음 | 매우 작음 |
| 언어 | Typescript | Javascript | Javascript |
| 성능 | 좋음 | 좋음 | 좋음 |
| 데이터 바인딩 | 단방향/양방향 바인딩 | 단방향 바인딩 | 양방향 바인딩 |
| 러닝커브 | 높음 | 쉬움 | 쉬움 |
마무리
Angular, React, Vue 는 모두 매우 활발하게 개발중이다. 정기적으로 새 버전을 출시하고 기존 버전을 유지 관리한다.
React가 선호되고 학원에서 많이 가르치는 이유는 첫째로 HTML 과 JS 만 알아도 진행할 수 있을 정도로 쉽고, 리엑트의 높은 점유율이 그 이유일 것이라고 생각된다.
그렇다고 무작정 React 만 하는 것이 옳은가? 라고하면 나는 아니라고 생각한다.
개발을 할 때마다 팀원, 프로덕트의 규모 모두 다르다. 이들을 선택할 때 같이 작업하는 팀의 경험이 결정적인 요소가 될 것이다.
또 프레임워크는 언제든 세대가 교체되 거의 사용하지 않는 프레임워크가 될 수 있다. 때문에 개발 트렌드에 지속적으로 관심을 가지는 것이 개발자에게 꼭 필요한 자세라고 생각이 든다.