React를 사용하는 이유 ? (React vs Vue vs Angular)

세 가지를 비교하기 앞서 먼저 많은 사람들이 사용하는 React에 대해서 먼저 알아보자

 

https://npmtrends.com/@angular/core-vs-react-vs-vue 

위에 사진을 보면 많은 사람들이 react를 사용하고 있는 걸 알 수 있다.

우리는 react를 왜 사용할까?

 

React

먼저 react란 facebook에서 만든 사용자 인터페이스(UI)를 만들기 위한 JavaScript 기반프론트엔드 라이브러리이다.

react는 UI(사용자 인터페이스)를 컴포넌트 단위로 쪼개서 개발할 수 있도록 해준다. 

React의 가장 핵심적인 특징은 바로 컴포넌트 기반이라는 점인데 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.

 

react에서 컴포넌트는 핵심 개념인데 그렇다면 여기서 말하는 컴포넌트는 뭘까?

컴포넌트가 무엇인지 알게 되면 우리가 react를 사용하는 이유를 알 수 있다.

 

Component란 특정 기능을 담당하는 독립적인 UI 블록이다.

웹페이지의 헤더나 푸터 네비게이션 바 등과 같이 HTML/CSS로 디자인하고 JavaScript로 기능을 넣은 특정한 UI 부분을 따로 분리해낸 것이다. 즉 어떠한 UI 부분을 따로 모듈화 시킨 개념이다

 

아래 사진과 같이 header, main의 내용을 모듈화 시킨 뒤 App이라는 곳에서 모은 것을 볼 수 있다.

 

이렇게 컴포넌트로 나누는 이유는 코드의 재사용성과 유지보수성을 위해서이다.

한 번 만들어둔 컴포넌트는 다른 곳에서도 쉽게 재사용할 수 있고 수정이 필요할 때도 해당 컴포넌트만 고치면 되기 때문에 전체 코드를 일일이 고칠 필요가 없다.

또한 컴포넌트를 잘게 나눌수록 각 부분의 역할이 명확해지기 때문에 협업 시 역할 분담도 쉬워지고, UI 구조를 이해하기도 훨씬 수월해진다.

 - 재사용성: 한 번 만든 컴포넌트를 다른 곳에서도 그대로 쓸 수 있다.

 - 유지보수성: 수정이 필요하면 해당 컴포넌트만 고치면 된다.

 - 협업에 유리: 각자 다른 컴포넌트를 맡아서 개발하기 좋다.

 - UI 구조 이해가 쉬움: 코드가 구조적으로 나눠져 있어 파악이 쉽다.

 

Angular

Angular는 Reat와 Vue 보다 먼저 등장한 것으로

React는 자유도가 높은 반면 Angular는 룰이 명확한 정해진 길로 코드를 작성해야한다는 특징이 있다.

또한 Angular는 데이터의 값을 자동으로 갱신을 해주는데, 즉 Angular는 양방향 바인딩이라는 특징을 가진다.

 

양방향 바인딩이란 말이 무엇인가?

 

양방향 바인딩이랑 사용자의 입력값이 자동으로 자바스크립트 데이터($scope)에 들어가고 그 데이터가 바뀌면 HTML 화면도 자동으로 바뀐다.

검색창에 뭔가 입력하면 그 값이 자동으로 변수에 들어가고 그 변수로 화면 어디든 실시간으로 바꿀 수 있다.

 

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name}</p>

React로는 위에 코드처럼 입력값을 직접 onChange로 잡아서 state를 업데이트해줘야 하지만

 

<input [(ngModel)]="name">
<p>{{ name }}</p>

이처럼 사용자 입력값이 자동으로 JavaScript 변수에 반영되고
그 변수가 바뀌면 화면도 자동으로 갱신된다. 아주 편리하다.

 

그렇다면 왜 우리는 자동으로 처리해주는 Angular를 두고 왜 React를 사용할까?

 

AngularJS는 값이 변경되었는지 계속 확인하는 Digest Loop 방식을 사용한다.

쉽게 말해 전체 데이터를 계속 돌면서 값이 바뀌었는지를 확인하는 방식이다.

 

$scope.name = "Alice" 이런식으로 값이 바뀌면 Angular는 전체 scope를 다 돌며 변경사항을 찾는다.

 

변경사항이 있으면 화면을 다시 그려주지만 바뀐 값이 1개든 100개든전체를 다 검사를 한다는 단점이 있다.

컴포넌트가 많아질수록 비교할 것도 많아지고 성능적으로 큰 부담이 될 수 있다.

 

이를 위해 해결해야할 과제는?

1. 값이 진짜 바뀌었을 때만 감지해야 한다
2. 필요한 부분만 다시 그려야 한다
3. 전체 페이지 말고 조각조각 컴포넌트 단위로 나눠서 처리해야 한다

 

이러한 문제를 해결해야만 했고 이를 해결해준 것이 바로 React인 것이다.

 

 - Virtual DOM을 이용해 변경 사항만 효율적으로 감지

 - setState()로 명시적으로 상태를 변경

 - 컴포넌트 단위로 UI를 쪼개어 관리

 

 

하지만 우리가 직접 변경값을 onChange로 잡아서 state 값을 업데이트하는 방식이 angular에서 편리하게 사용했던 템플릿을 사용하는 것보다 번거로웠기 때문에 Angular를 사용했던 사람들을 Angular의 방식을 선호했다.

 

Vue

Vue란 Evan You라는 개발자가 React와 Angular의 장점을 살리고 단점을 보완하여 독립적으로 만든 UI를 위한 자바스크립트 라이브러리이다.

Vue는 AngularJS의 양방향 바인딩을 채택하고 React의 Virtual DOM을 채택했다.

간단하게 말해서 Angular의 장점과 React의 장점을 합친 라이브러리이다.

 

최대한 많은 것들을 JavaScript 중심으로 풀어내려고 했던 React와는 다르게 HTML을 그대로 사용할 수 있게 되어있기 때문에 쉽고 빠르게 배울 수 있어 입문자나 디자인팀과 협업하기 좋다.

 

 

하지만 왜 아직 React를 더 많이 사용할까?

 

먼저 React가 TypeScript와의 궁합이 더욱 좋다.

Vue의 템플릿은 HTML + Vue 문법이라 TypeScript랑 연결이 어색하거나 제한적일 수 있다.

 

또한 React Native을 통해 하나의 React 문법으로 웹/앱/데스크탑까지 구현할 수 있다. NativeScript, Vue Native 등은 생태계가 작기 때문에 React Native가 더 많이 사용된다.

 

이뿐만 아니라 React는 페이스북/메타 주도로 초기에 엄청난 커뮤니티가 형성되었고 라이브러리/툴도 많고 자료도 풍부하다는 장점이 있다. 이를 통해 오픈소스 기여나 질문 해결에 있어서 쉽게 도움을 받을 수 있다.