React vs Angular : 리액트와 앵귤러 비교

< 앵귤러와 리액트의 비교 >

자바스크립트로 개발을 해오던 사람이라면 한번쯤은 들어봤을 리액트, 앵귤러입니다.

그리고 둘중에 무엇을 선택해야 할지 고민한 경험도 있을것 같습니다.

우선 결론부터 이야기 하자면 어떤 환경, 목적을 가진 애플리케이션이냐에 따라

다르다고 할 수 있겠습니다.

아래의 글은 

https://www.sitepoint.com/react-vs-angular

를 번역하였습니다.

앵귤러는 프레임워크이고 리액트는 UI구성요소 라이브러리 입니다.

이제부터 자세히 소개해보겠습니다.

선택하기에 앞서 해봐야 할 질문들은 다음과 같습니다.

1. 도구 자체에 대한 질문

- 얼마나 안정감 있는가, 무엇을 기반으로 하였는가

- 어떤 기능을 가지고 있는가

- 아키텍쳐와 패러다임이 어떤가

- 다른 툴, 개념과 호환이 되는가

2. 개인적인 영역에 대한 질문

 

- 나와 나의 동료들이 쉽게 배울 수 있는가

- 나의 프로젝트에 잘 맞는가

우선 리액트와 앵귤러 모두의 공통점은

1. 버그나 불안정성에 대해서 괜찮은 모습을 보여주고 있고

2. 공급업체가 갑작스럽게 포기할 위험도 적으며

3. 지식 기반 커뮤니티가 성장하고 있는 추세

입니다.

이 둘의 차이점에 대해서 정리해 보겠습니다.

- 개발사

리액트	앵귤러
페이스북. 3년 반 정도 되었고 gitHub 인기 프로젝트	구글. 에드워즈라는 자회사 앱에 잘 구현되어 있다

- 기능

리액트	앵귤러
- 의존성 주입 없음 - xml과 비슷한 JSX를 사용 - css 보호 - 단위 테스트에 용이 * 간결하지만 기능을 직접 추가해야 한다.	- 의존성 주입 있음. - html 템플릿 - 라우팅 - 간결한 ajax - css 캡슐화  - xss 보호 - 단위 테스트에 용이 * 기능이 많다. 하지만 기능이 많음으로 오버헤드가  발생하고 그 기능에 갇히는 면이 있다.

- 언어와 패러다임, 패턴에대한 비교

리액트	앵귤러
JSX는 마크업과 로직을 분리하지 않고 XML 스타일의 언어를 사용하여  javascript코드에서 직접 마크업을 작성할 수 있다. JSX는 정적 페이지이기 때문에 컴파일러에서 지속적으로 오류를 잡아줄 수 있습니다. flow라는 자바스크립트용 유형확인 도구를 사용한다. redux라는 단순한 상태변경 라이브러리가 있다. 이는 프로젝트의 구조를 명확하게 해준다	타입스크립트와 RxJS가 있다. RxJS는 비동기 작업을 유연하게 처리할 수 있게 해준다. 매우 복잡하고 강력한 기능을 가지고 있다. 대규모 프로젝트에 좋다.

- 주변 환경에서의 비교

리액트	앵귤러
리액트 CLI는 프로젝트 설정을 신속하게  해주는 유틸리티다 Jest는 유닛테스트에 좋고 백엔드와 연결하여 프록시,  플로우 등을 지원한다. Ionic이 하이브리드 앱이라면 React Native는 고유의 UI를 제공한다.  이는 자신만의 구성요소를 만들어서 JAVA, Objective-C, Swift로 작성된 원시코드에 바인딩 할 수있게 해준다. 디자인 컴포넌트 라이브러리도 존재하며 next.js 로 서버렌더링 할수 있다. MobX는 상태를 관리하기 위한 대체 라이브러리 이다. story book은 개발환경의 구성요소를 관리한다. 구성요소를 문서화하거나, 개발, 테스트 설계를 위한 많은 추가 기능을 제공한다.	앵귤러 CLI가 프로젝트 빌드를 편하게 해준다. 몇 가지 명령으로 프로젝트를 생성하고 실행한다. 매력적인 모바일 프레임워크인 아이오닉2와  싱크가 잘 맞고 하이브리드 앱에 좋다. ngrx/store는 redux에서 영감을 받은  상태관리 라이브러리인데 RxJS와 결합하면  푸시관련 성능을 향상시킨다

- 학습곡선에서의 비교 ( 러닝커브 )

리액트	앵귤러
JSX를 어떻게 배우느냐에 따라 달렸다. 라우터 개념을 익히는게 새롭게 다가오는데 Javascript로 구성되어 있고 공식 튜토리얼이 있다. 백엔드와 프론트 엔드 개발 경험이 제한 적인 사람도  쉽게 접근 할 수 있다는 주장이다. 오류 메시지가 명확한 편이며 문제 해결 방법에 대한 설명을 제공한다.	앵귤러는 리액트보다 배워야 할게 많다. 무엇보다도 타입스크립트에 익숙해져야 한다. 모듈, 의존성 삽입, 구성요소, 서비스, 파이프, 템플릿 지시문, Aot 컴파일 등 많은 항목이 있다. Rx.js는 무거운, 어려운 주제이며 공식 사이트에서 설명하고 있다. 여기서의 어려움은 주로 오류 메시지를 이해하기  어렵다는 말이 된다.

- 실제로 적용하려면

1. 프로젝트의 크기

2. 얼마나 오래 유지할지

3. 기능이 사전에 기획되었는지, 유연해야하는지

4. 기능이 사전에 기획되었다면 필요한 기능은 무엇인지

5. 도메인 모델과 비즈니스 모델의 복잡성

6. 타겟으로 하는 디바이스가 무엇인지

7. 서버측 렌더링과 SEO 사이의 결정

8. 실시간 이벤트 스트림의 사용량

9. 개발팀 규모

10. 개발자들의 경험과 배경

11. 사용준비가 된 구성요소 라이브러리가 있는지

등을 통해 점검한다.

먼저 개념을 적용한 프로토 타입을 만들어 보는 것이 좋으며 단순한 방식으로 구현해 보는 것이 좋다.

PoC는 일반적으로 구축시간이 적으며 프레임워크를 경험하게 해준다. 이를 통해 핵심 기술사항의 유효성을

확인할 수 있다.

( * 개념 증명(槪念證明, POC, Proof of Concept)은 기존 시장에 없었던 신기술을 도입하기 전에 이를 검증하기 위해 사용하는 것을 뜻한다. 특정 방식이나 아이디어를 실현하여 타당성을 증명하는 것을 뜻한다. - 위키 백과 )

마치며

한 프로젝트에 대한 프레임워크를 선택하면 향후 프로젝트에 비슷한 기술 스택을 사용할 것입니다.

기술 스택을 일관적으로 적용하는게 좋지만 매번 동일한 방법만 고수하는게 아니라 상황과 변화를 체크하는 것이 필요합니다.