지식&개념

Angular vs React vs Vue

muyeon 2024. 4. 16. 22:19
개발자는 항상 적절하며 근거있는 선택을 해야한다.
프론트의 프레임워크는 크게 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년
지원 Google Facebook 지역사회
크기 중간 작음 매우 작음
언어 Typescript Javascript Javascript
성능 좋음 좋음 좋음
데이터 바인딩 단방향/양방향 바인딩 단방향 바인딩 양방향 바인딩
러닝커브 높음 쉬움 쉬움

 


마무리

 

Angular, React, Vue 는 모두 매우 활발하게 개발중이다. 정기적으로 새 버전을 출시하고 기존 버전을 유지 관리한다.

React가 선호되고 학원에서 많이 가르치는 이유는 첫째로 HTML 과 JS 만 알아도 진행할 수 있을 정도로 쉽고, 리엑트의 높은 점유율이 그 이유일 것이라고 생각된다. 

그렇다고 무작정 React 만 하는 것이 옳은가? 라고하면 나는 아니라고 생각한다.

개발을 할 때마다 팀원, 프로덕트의 규모 모두 다르다. 이들을 선택할 때 같이 작업하는 팀의 경험이 결정적인 요소가 될 것이다.

 

또 프레임워크는 언제든 세대가 교체되 거의 사용하지 않는 프레임워크가 될 수 있다. 때문에 개발 트렌드에 지속적으로 관심을 가지는 것이 개발자에게 꼭 필요한 자세라고 생각이 든다.