[번역] React vs. Angular

다음 글의 번역입니다. 저자에게 번역글에 대한 허가를 받고 작성한 글입니다. (www.backand.com)

[React vs. Angular - Itay Herskovits]

If writer does not want this article, please contact me.(han41858@gmail.com)

---

 최근, 웹 개발 환경은 아주 빠르게 변하고 있다. 매달 새로운 JavaScript 프레임웍이 나오고 있고, 각각에 대해 도전하고 이해해볼 필요가 있다. BACK& 에서는 이러한 것들에 대해 도움이 될만한 것을 시도해보려고 한다. 이어지는 시리즈에서 몇 개의 프론트엔드 JavaScript 프레임워크를 살펴보고 AngularJS 와 어떻게 비교해야 하는지 알아본다. 각각의 간단한 역사를 살펴보고 비교를 위해 일부 기능적인 부분에 접근해 볼 것이다.

 이 문서에서는 React 를 다루고 웹 개발에서 Angular 와 어떻게 비교해야 할지 알아본다.

 React 빠르게 훑어보기

 React 는 Facebook 에서 성능 좋은 유저 인터페이스를 구현하는 것을 목표로 만들어진 JavaScript 웹 프레임워크이다. React 는 다른 JavaScript 프레임웍들이 겪었던, 다량의 데이터셋을 효율적으로 처리하는 것을 목표로 만들어졌다. React 는 virtual DOM 을 사용하고, 변동사항이 있을 때 전체 페이지를 다시 렌더링 하는 방식 대신에, 관련있는 부분만 갱신하는 메카니즘을 사용한다. 

 의견 부족

 AngularJS 는 "독선적인" 프레임워크로 언급된다. AngularJS 팀의 개발자들은 프론트엔드가 어떻게 보여야 한다는 어떠한 "좋은" 아키텍처에 대한 아이디어를 갖고 있고, 이 아키텍처를 AngularJS 의 아주 밑단에 구성해놓았다. 당신의 어플리케이션이 AngularJS 팀의 설계에 부합한다면, AngularJS 를 도입하는 것은 즐거운 일일 것이다. 그러나, AngularJS 에서 원하는 아키텍처와 당신의 요구사항이 다르다면, 어려움을 겪게 될 지도 모른다. 상대적으로 React 는 당신의 코드에 구조적인 영향을 주려고 하지 않는다. React 는 컴포넌트의 지연 로딩, 로드 시간 감소를 통해 당신의 데이터가 어떻게 표현되는지를 관리하는 것에 집중한다.

 템플릿

 데이터 기반의 화면을 구성하는 데에 Angular 의 디렉티브를 사용하는 것은 템플릿을 이용하여 화면을 놀랍도록 간단하게 만드는 데에 이점이 있다. AngularJS 에서 데이터를 이용하여 UI 를 구성하는 것은 굉장히 직관적이며, 데이터 표현에 대해 구체적인 사항에 대해 명시하는 것을 포기하더라도 최종 결과는 사용자에게 직관적이고 더 적은 코드로 더 명확한 결과물을 보여줄 수 있을 것이다. 반면에 React 는 데이터를 표시하기 위해 사용자 함수를 요구하는 경향이 있다. 데이터가 DOM 에 표시되기 전에 어떻게 표시될 것인지 정의해야 하며, 어떤 요소가 어떻게 표현될지 정하느라 주의를 뺏길 수 있다.

 성능

 Angular 의 데이터 표현 로직은 상당히 잘 짜여져 있지만 대용량 데이터 셋의 경우 데이터 렌더링에 약점이 있다. 2-way 데이터 바인딩은 각각의 변경가능한(changeable) 요소들에 대해 리스너를 요구하며, 많은 양의 데이터가 주어진다면 심각한 성능 문제를 초래할 수 있다. 반면에 React 는 요소의 변화를 virtual DOM 을 이용하여 추적한다. 변화가 감지되면 React 는 실제로 변화한 부분에 대해서만 조각을 구성하여 그 조각을 DOM 에 반영한다. 하나의 요소 변경에 대해 전체 DOM 에 대해 갱신하지 않기 때문에 React 는 다른 JavaScript 프레임웍들에 비해 상당한 성능을 자랑한다.

 어플리케이션 구조

 AngularJS 와 React 의 또 다른 점은 각 프레임워크를 표현하는 구조의 방식에 있다. AngularJS 는 MVC(Model - View - Controller) 구조를 처리하는 데에서부터 시작했고, MVVM(Model - View - ViewModel) 으로도 발전했다. 반면에 React 는 MVC 의 "V" 에만 집중하며 데이터 표현에만 집중하도록 설계되었고, 다른 어플리케이션 구조적인 부분은 개발자의 선택으로 남겨두었다. 이런 아키텍처의 유연함 덕분에 생기는 재미있는 점은, AngularJS 어플리케이션의 성능 향상을 위해 일부 컴포넌트를 React 로 구성할 수 있다는 것이다.

 결론

 어플리케이션에 도입할 JavaScript 프레임워크를 선택하는 것은 각 프레임워크에 대한  어느 정도 이상의 지식이 필요하고 각 프레임워크의 장단점을 고려해야 한다. 지금까지 살펴본 것처럼, React 는 다량의 변동 데이터 셋을 다루거나 대규모의 데이터 테이블을 빠르고 쉽게 관리하는 데에 훌륭한 선택이다. 그러나, AngularJS 와 같이 풀스택을 기능적으로 커버하는 것은 아니다. 예를 들면, 데이터 표시를 위한 컨트롤러 레이어가 없다.

 최종적으로, AngularJS 와 React 를 선택하는 것은 단순한 질문부터 시작해야 한다. React 를 공부하고 사용하는 노력만큼의 잠재적인 성능 향상이 고려되어야 하는가? 아니면 AngularJS 구조 위에 React 컴포넌트를 올리는 것이 시너지 효과를 가져다 주는가? 안타깝게도 쉬운 답은 없다. 당신의 어플리케이션에 가장 적합한 선택이 필요할 것이다.

Get a free hosted AngularJS backend with features such as user management, social signin, payment integration, security and more – GET STARTED NOW.