React VS Angular2

우연히 어쩌다가 본 React보다 Angular2에 더 주목해야하는 이유라는 글을 보고 이 글을 써본다.

요즘 프론트엔드단이 SPA가 대세가 되면서 많은 격변을 겪고 있다. 그 중에서도 가장 주목을 받은 것은 MEAN Stack에 포함된 Angular 그리고 페이스북에서 제공하고 있는 React이다. 초반에 승기를 잡기 시작한 것은 Angular 였지만, Watching방식의 문제로 이런저런 성능하락으로 인해 어느새 React가 역전하여 대세를 이루게 되었다. 여기에 AngularJS를 만든 구글은 이러한 문제들을 수정한 Angular2를 내놓았지만 아직은 React에 비해 힘을 쓰지 못하고 있고 심지어 Angular에도 밀리고 있는 실정이다.

아무튼 뭐가 대세인지는 언제든 바뀔 수 있는 흐름이기에 지켜보면 되는 문제이고, 일단은 이 글에서는 둘을 비교해보도록 하자.

비슷해보이지만 근본적으로 다른 둘

위에 언급한 글에서 해당 글의 작성자분이 언급한 Angular2가 React에 비해 좋은 점 중에 주목해야 될 두가지가 있다.

템플릿(마크업)과 코드의 분리
HTML 표준과 Web Component에서 언급하고 있는 상위루트의 제한

사실 이런 차이가 나는 이유는 기본적으로 Angular(2포함)와 React의 기본 사상의 차이가 그 기저에 있다.

그 사상의 차이가 뭐냐면 Angular는 HTML을 그리고 그 HTML에 JS오브젝트를 바인딩 시킨다. 반면에 React는 자신이 관리하는 HTML DOM을 생성한 뒤 그것을 자신이 들어갈 위치에 append 시킨다.

일견 비슷해 보이지만 살펴보면 꽤나 다르다. 내가 예전에 공부하다 찾은 사이트에서는 이렇게 말하고 있다. Angular는 HTML에 JS를 포함하고, React는 JS에 HTML을 포함한다. 간결하면서도 둘의 차이를 핵심적으로 보여주는 문장이라고 생각한다. 이 차이가 Angular와 React의 기본적인 동작과 제공하는 API의 차이를 만들었다.

템플릿과 Virtual DOM

위의 차이로 인해 가장 큰 차이를 보여주는 것이 화면을 그리는 방식이다. Angular는 템플릿을 String으로 제공하게 된다. 이 때문에 Angular에서는 다양한 지시자를 통하여 템플릿을 자유자재로 수정할 수 있는 장점이 있다. 거기에 React와 달리 DOM의 루트가 여러개여도 상관이 없다. 이렇게 생성된 String을 통해 DOM을 생성하게 되지만 이 DOM과 컴포넌트는 직접적으로 연결되지 않는다. 다만 부분부분이 컨트롤러와 모델에 바인딩되어 수정되는 형태를 따르게 된다.

React는 Virtual DOM이라는 형태로 화면을 구성한다. 실제로 Virtual DOM의 경우 번역기를 거치면 DOM을 생성하는 형태로 변환되며, 이 DOM을 출력하고 바꾸는 것을 컴포넌트가 관리하게 된다. 이렇게 하다보니 관리하는 DOM을 명확히 하기 위해 DOM의 루트가 하나로 제한되게 되는 것이다. 거기에 Vitual DOM의 경우 모양은 일반 HTML 마크업 구문 처럼 보이지만 실상은 생성 함수의 연속이기에 템플릿 파일을 분리하기 힘든 것이다.

이렇게 보면 React는 Angular에 비해 제약이 많은 것 같지만 이로 인해 가져가는 장점이 있다. 먼저 바로 자신의 DOM에 접근이 가능하다. react-dom의 findDOMNode함수를 통해 얼마든지 자신의 DOM을 명확히 찾을 수 있다. 물론 아직 내가 완전히 Angular2를 파악하지 못해서 모르는 것일 수도 있지만, Angular2에서는 이렇게 DOM에 접근을 하려면 id를 사용하는 수밖에 없다고 알고 있다. 거기에 React의 경우 하위 DOM에도 자유롭게 접근이 가능한 ref라는 속성을 제공한다. 물론 id로 접근이 가능하다는 점에서 딱히 장점이 아니지 않는냐는 의견이 있을 수 있지만 유니크해야 되는 id의 특성상 관리의 관점에서 충분히 장점이라고 생각한다.

WebPack은 괴물을 만들었다

그리고 위에서 언급한 Shadow DOM에 의한 뷰단위 CSS지정의 장점에 대해서 얘기해보자. 일단 먼저 언급해야 될 것은 현재 React개발의 대세가 된 조합을 보면 React + Redux + WebPack 이다. 여기서 주목해야 될 것은 WebPack이다. 이 WebPack의 등장으로 현재 React개발은 엄청난 구조적 변경을 겪었다. 간단한 예시를 코드로 보자.

import React from 'react';
import './app.scss';
import test_image from './test.png';

export default class App extends React.Component {
  render(){
    return(
      <div className="app">
        <img src={test_image} />
      </div>
    );
  };
}

그냥 보면 es6에 따른 소스 같지만, 위쪽 2번째 3번째 줄을 보면 많이 이상한 코드가 보인다. scss를 임포트 하며 심지어 이미지까지 임포트하여 처리하고 있다. 당연히 WebPack이 전제되어야 가능한 코드이지만 이는 완벽히 컴포넌트와 HTML, 스타일시트 그리고 리소스까지 한번에 묶음으로 관리가 되고 있는 모습을 보여준다.

이는 완전히 모듈화로 처리되는 것을 뜻하며 Shadow DOM이 특별히 장점이 되지 못한다는 것을 뜻한다. 거기다가 이런 WebPack으로 인한 관리가 억지라고 여겨진다면 ReactCSS라는 걸출한 CSS컴포넌트가 존재한다.

JSX와 TypeScript

또한 TypeScript와 JSX에 대해 비교해보자. 사실 둘다 JS의 사투리격인 언어들이라고 할 수 있다. 다만 여기에도 근본적인 차이가 있다. 먼저 TypeScript는 문법 자체가 변경된 사투리이다. 이에 반해 JSX는 VirtualDOM을 제외하면 JS와 다를 게 없는 언어다. 한발 물러서서 보면 JSX가 아닌 TSX도 나올 수도 있는 상황이다. 물론 TypeScript가 브라우저들에서 완전히 지원이 되고 표준이 된다면 이러나 저러나 번역기를 한번 통해야 되는 JSX가 불리할 수도 있다.

하지만 WebPack이 출동하면 어떨까? 애초에 최적화 측면에서 본다면 WebPack을 통하는게 이러나 저러나 대세일 수 밖에 없다. 이는 Angular2도 다를게 없다고 본다. 그렇다면 역시 TypeScript의 장점도 애매해질 수 밖에 없다. 물론 번역기를 안 통하고 바로 브라우저에 적용이 된다면 번역기 없이 따라하기 쉬운 Angular2가 더 따라하기 쉬워질 가능성도 있다.

Leaning Cost와 사용자 풀

Angular를 비롯해 Angular2를 보면 구글이 정말 많은 걸 생각하고 많은 걸 준비했구나 라는 걸 느낄 수 있다. 정말 구글의 자산과 네임밸류는 고스톱쳐서 딴게 아니라는 걸 알 수 있는 부분이다. 하지만 이 때문에 알아야 될 것이 너무 많다. 구조또한 신경써야 될 것이 많다. 처음 접하고 시작하기까지 시간이 많이 걸릴 수 밖에 없다.

그에 반해 React는 정말 DOM생성/수정과 이벤트 바인딩에만 집중한 느낌이 확 든다. 그로 인해 처음 따라하고 간단하게 만들때는 정말 쉽게 만들 수 있지만 점차 많은 기능을 필요로 하다보면 해야 될 것이 많아진다.

하지만 React의 사용자 풀이 거대하다는 점이 이 단점을 보완해준다. 당장 npm에 react로 검색해도 엄청난 모듈들이 쏟아지며, yeoman의 Generator를 봐도 react에 관련된 것이 엄청나다. 정말 이런 점에서 양키들을 사랑할 수 밖에 없다. 내가 필요한 건 이미 거의 다 만들어 놓았고 좀 아쉬워도 충분히 참조가 가능할 정도로 자료가 넘쳐난다. 여기에 비해 Angular2는 아직 정식버전도 아닐뿐더러 시작이 늦은 상황이라 사용자 풀이 아직 충분하지 못하다.

물론 나중가서의 상황은 아무도 알지 못한다. 애초에 회사에서 당장 내일 떨어질 업무도 모르는 마당에 React와 Angular2의 대결의 결과는 아무도 모르는 것이다. 가장 좋은 것은 둘 다 공부하는 것이며, 개인적으로는 우선적으로는 React를 먼저 배우기를 추천한다. 당장 사용하기에는 React가 더 좋은 것은 부정할 수 없는 사실이며, Angular2는 미래를 대비하여 공부하는 것이 좋다고 본다.

React VS Angular2 Aug 9, 2016