React: #1 React의 탄생배경과 특징

12 min readJul 23, 2017

최근 몇년간 웹 세계는 정신없이 변화하고 있습니다. 무언가가 순식간에 시장을 휘어잡는듯 하다가 언제 그랬냐는 듯 소멸해버리고 하죠. 상당히 피곤하기도 하지만 한편으로는 굉장히 흥미로운 시대이기도 합니다. 그러나 프론트엔드를 처음 공부하는 분들이라면 아마 Jquery, Angular, React, Vue 같은 이름들 앞에서 꽤나 혼란스러울 수도 있을 테지요.

사실 프레임워크나 라이브러리들은 필요시 자신의 취사선택에 따라 사용하는 대상이지, 딱 하나만 고를 문제는 아닙니다. 어쨌든 이 연재는 앞으로 React 생태계를 구성하는 여러 도구(React, Redux, GraphQL, Apollo)들을 개념편과 실습편으로 나누어 다룰 예정입니다. 그 전에 전지적 React의 시점에서 React 이전에 무엇이 있었고, React의 특징은 무엇이며, 격동하는 웹 환경에서 꾸준한 성장을 이룰 수 있었던 비결에 간단하게 짚고 넘어가 보도록 하지요.

#React전에 Jquery, Backbone, AngularJS가 있었다.

2006년 John Resig가 Jquery를 발표한 이후, 이 대단한 아이디어는 순식간에 웹을 사로잡았습니다. Jquery가 DOM을 다루는 방식은 지금까지도 가장 쉽고 효율적인 방식으로 인정받고 있으며, 오랜 세월동안 사실상의 표준으로써 군림해왔습니다.

그러다가 Backbone과 AngularJS를 위시한 SPA(Single Page Application)이 보다 구조화된 프론트엔드 환경을 제시하기 시작합니다. 그러나 역시 Jquery가 몰락한 것은 아니어서, Backbone과 AngularJS는 역시 DOM을 다루는 중요한 방법으로써 Jquery를 사용했습니다.

지금은 보기만 해도 골치가 아파오는 Backbone이지만 그 발자국은 거대했습니다

#10년은 가지고 놀만한 아이디어, React의 등장

React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications.(리액트는 몇년은 가능성을 탐험해 볼 만한 멋진 아이디어이다.) -Guillermo Rauch‏(socket.io, Mongoose, Next.js의 창시자)

이 상황에 완벽하게 균열을 내면서 등장한 것이 React입니다. React는 Google을 제외하면 어떤 의미에서는 현재 최강의 웹이라고 할 수 있는 Facebook이 만든 Javascript 라이브러리입니다.

React는 단숨에 수많은 개발자들을 사로잡았습니다. Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등 세계를 선도하는 서비스들이 React를 사용합니다. 그중에서도 Airbnb와 Netflix는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있습니다.

React는 Angular같은 Framework가 아니라 Library입니다. Router처럼 웹을 만드는데 꼭 필요한 도구들이 기본적으로 포함되어있지 않습니다. 그 대신 가볍습니다. 무엇보다 훨씬 빠르게 배울 수 있습니다. 더불어 개발자들의 창의성을 자극하는 매력이 있습니다.

React는 다음 3가지의 중요한 특징을 지니고 있습니다. 이 요소들은 분리된 것이 아니라 서로 연결되면서 React를 지탱합니다.

#Component

Component는 UI를 구성하는 개별적인 뷰 단위입니다. React로 개발을 한다는 것은 마치 블럭을 조립해 성을 만드는 것과 같습니다. 전체 앱은 각 Component들이 결합해서 만들어 지게 되죠. 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능합니다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명한적이 있습니다.

#JSX

JSX는 React를 위해 태어난 새로운 자바스크립트 문법으로, 과거 페이스북이 만들었던 PHP의 개량판 XHP에 그 기원을 두고 있습니다. (참조)React.js Conf 2015 Keynote

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)

이 코드는 “Hello, John”라는 div를 생성하는 컴포넌트입니다. ES6를 공부하신 분들이라면, class를 이용한 method 상속 패턴 자체에는 익숙하실 겁니다. 그러나 아마 React를 처음 접하신 분들에게는 낯선 곳이 두군데 있습니다. 바로 render 함수의 return 값과 ReactDOM.render함수의 첫번째 argument죠. 뭔가 html처럼 보이긴 하는데 스트링으로 감싸진 것도 아닌 정체불명의 녀석들입니다.

React는 작성한 코드를 컴파일하는 과정을 꼭 거쳐야 합니다. 대부분 사실상 자바스크립트 표준이 되어가고 있는 Babel을 사용하죠. Babel의 React 플러그인을 통해 위의 코드를 컴파일하면 다음과 같은 모습이 됩니다.

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

이제 그냥 보통 자바스크립트 코드가 되었죠? React는 Babel과 같은 트랜스파일러를 꼭 써야하기 때문에 Webpack 등을 통한 꽤 까다로운 초기 세팅이 필수적입니다. 그렇다면 왜 굳이 이런 번거로움을 들여가며, JSX를 사용하는 것일까요?

물론 JSX를 사용하지 않고 바로 위의 코드처럼 직접 순수한 자바스크립트 코드를 작성하여 React를 사용할 수도 있습니다. 그러나 실제로 그렇게 사용하는 경우는 거의 없을 뿐 아니라, React를 사용하는 중요한 이유 중 하나를 포기하는 셈이 되죠.

JSX는 보통 선언적이라고 번역되는, Declarative한 개발을 도와주는 도구입니다. 간단하게 말해 한눈에 이해하기 쉬운 개발을 만들어 줍니다. JSX는 그 형태가 마치 html과 같습니다. 유저에게 보여주고 싶은 최종적인 View라고 할 수 있죠. 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있습니다. 이는 예측가능한 개발을 만들어줄 뿐 아니라 유지보수, 협업 등에서도 엄청난 강점을 발휘합니다.

#Vitual DOM

결국 위의 모든 것을 가능하게 만들어주는 것, 그리고 React의 가장 큰 특징이자 뜨거운 논쟁을 불러일으키는 대상, 그것이 바로 Virtual DOM입니다.

DOM은 웹 개발자들의 영원한 숙제입니다. DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서입니다. 웹은 원래 인터넷을 통해 공유되는 문서의 규격으로써 탄생했죠. 문제는 이 DOM을 효과적으로 다루는 것이 꽤나 힘들다는 것입니다. 그래서 DOM이 성능이 좋지 않다느니 하는 말도 나오지만 사실 DOM 자체보다는 해석 과정에 문제가 있는 경우가 대부분입니다. 브라우저별로 이 DOM을 가지고 화면을 만드는 방식이 다르기도 하구요.

Jquery는 무엇이 문제였나

Jquery는 누구나 쉽게 DOM을 조작할 수 있도록 하는 아주 멋진 도구였습니다. 그러나 Jquery는 뭔가 구조적 대안이라기 보다는 날카로운 커터칼에 가까운 것이었죠.

앱 전체에 무분별하게 Jquery가 난무하고 있는 코드를 본 적 있으신가요? Javascript로 간단한 계산도 못해도 Jquery는 쓴다느니, 남이 쓴 Jquery를 그냥 갖다 붙이면 된다느니 하는 말이 나오는 것이 바로 Jquery의 장점과 단점을 모두 보여준다고 할 수 있습니다.

Jquery가 인기있었던 이유가 바로 이 커터칼처럼 DOM을 잘라내는 방식에 있었지만, 프론트엔드 개발의 전문성이 높아지고 대형 앱의 유지/보수가 화두가 되면서 이것이 Jquery의 한계로써 드러나게 되었죠.

DOM에 대한 완전히 새로운 접근

React의 가장 강력한 개성이 바로 이 Virtual DOM에서 나옵니다. 아래의 코드를 보겠습니다.

class HelloMessage extends React.Component {
  render() {
     return (
        <div>
          <div>Hello {this.props.name}</div>
          <div>I am {this.state.chatName}</div>
       </div>
    );
  }
}

이 HelloMessage 클래스는 만약 this.props.name이 Alex이고, this.state.chatName이 Thom이라면, “Hello Alex”, “I am Jenny” 라는 글자를 유저에게 보여주는 컴포넌트입니다. 그런데 만약 여기서 this.props.name은 그대로이고, this.state.chatName은 “Mary”로 바뀌었다면 어떻게 될까요?

“Hello Alex”, “I am Mary”라는 결과가 브라우저에 나타날 것이라는 건 쉽게 짐작할 수 있죠? 하지만 React는 여기서 한번의 작업 과정을 더 거칩니다. 그리고 이곳이 바로 Virtual DOM이 자신의 역할을 수행하는 부분입니다.

일단 React 컴포넌트는 render를 다시 호출하여 새로운 결과값을 return합니다. 그런데 이 return 값은 바로 DOM에 반영되지 않습니다. 바로 브라우저에 렌더링되지 않는다는 것이죠.

앞에서 React안에 있는 div들은 진짜 html이 아니라 Babel에 의해 컴파일되는 JSX라고 설명했었죠? render함수가 return하는 것은 새로운 Virtual DOM을 만들기 위한 재료입니다. React는 새로운 return 값을 가지고 새로운 Virtual DOM을 만듭니다. 그리고 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 어떤 부분이 달라졌는지 찾아냅니다. 그리고 바뀐 부분만 진짜 DOM에 적용합니다. 그러면 브라우저는 이 DOM을 해석하여 유저에게 새로운 화면을 보여주게 되죠.

다시 위의 코드를 통해 설명해 볼까요?

컴포넌트가 첫번째 render 함수를 호출하면서 “<div>Hello Alex</div><div>I am Jenny</div>”라는 값을 return 했다고 가정합시다. 그러면 유저는 “Hello Alex”, “I am Jenny”라는 값을 보게 됩니다. 그런데 컴포넌트의 this.state.chatName가 Mary로 바뀌어서 render 함수가 다시 호출되었습니다. 그러면 컴포넌트는 “<div>Hello Alex</div><div>I am Marry</div>”을 다시 return합니다.

그런데 여기서 this.state.chatName(Jenny -> Mary)는 변경되었지만, this.props.name(Alex)은 그대로입니다. Virtual DOM은 비교 작업을 통해서 이것을 찾아냅니다. 그리고 최종적으로는 진짜 DOM에서 “<div>I am Jenny</div>”만 “<div>I am Mary</div>”로 변경합니다.

왜 이렇게 번거로운 비교작업을 거치는 것일까요? 바로 DOM을 직접 바꾸면 안될까요? 앞에서 설명했듯이, 브라우저에게 DOM을 해석하고 렌더링 하는 것은 굉장히 비싼 작업입니다. Virtual DOM은 그 작업을 미리 최적화시켜줄 뿐만 아니라, 컴포넌트 단위로 묶어서 관리할 수 있게 해주죠. (이것에 관한 Velopert님의 멋진 번역이 있습니다.)

Virtual DOM은 단순한 DOM 조작 도구가 아니라 컴포넌트 단위로 움직이는 Declarative한 개발을 구현하기 위해 도입된 것입니다. 컴포넌트 단위의 개발을 구현하기 위해 보다 효율적인 DOM 조작 방식을 도입할 필요가 있었던 것이죠. 만약 Virtual DOM이 없었다면 React의 컴포넌트 철학은 제대로 구현될 수 없었을 것입니다. Virtual DOM의 코어 알고리즘을 굳이 공부할 필요는 없지만, React를 사용하시는 분이라면 적어도 왜 Virtual DOM을 사용하는 것이며 어떤 작업을 수행하는지는 꼭 이해하고 가셔야 합니다.

#결론: React가 개발자에게 던지는 질문은?

React는 이전의 프론트엔드 도구들과는 굉장히 다른 개념들을 많이 포함하고 있습니다. React는 기존의 Framework들보다는 작은 Library가 맞습니다. 하지만 React는 개발자들에게 사고의 전환을 요구하는 여러가지 물음을 던져줍니다. 개발자들이 React에 열광하는 이유가 파워풀한 성능이 아니라 바로 이 부분에 있다고 생각합니다.

React는 그 자체만으로는 러닝커브가 높지 않습니다. 개발자들은 React를 통해 툴이 아니라, 자신의 개발 자체에 집중할 수 있게 됩니다. 무엇보다 다양한 상상력을 발휘할 수 있게 됩니다. 그러나 그전에 Javascript 자체는 물론, React의 기본 개념을 명확하게 이해할 필요가 있습니다.

다음편에서는 기본적인 조금 더 React의 기본 개념들을 설명해볼 생각입니다. 차후에는 Redux를 통해 좀 더 규모있는 앱을 만드는 법을 살펴보고, GraphQL과 Apollo를 통해 미래의 모던웹이 지향하고 있는 모습을 엿볼 생각입니다.