발표가 끝나고 Q&A 세션이 시작되자, 예상했던 질문이 폭풍처럼 쏟아졌다. 거의 모든 질문이 단 하나의 주제, JSX를 향해 있었다.
한 개발자가 손을 번쩍 들고 날카롭게 질문했다. 그는 당시 유행하던 템플릿 엔진 중 하나인 핸들바(Handlebars)의 열렬한 지지자처럼 보였다.
“발표 잘 들었습니다. 하지만 저는 도저히 이해할 수 없습니다. 우리는 지난 몇 년간 마크업과 로직을 분리하기 위해 그토록 노력해왔습니다. 핸들바, 머스타시(Mustache) 같은 훌륭한 템플릿 엔진들이 바로 그 결과물이죠. 그런데 페이스북은 왜 그 모든 발전을 역행하여, 자바스크립트 안에 HTML을 섞어 쓰는 길을 택했습니까? 그 장점이 대체 무엇입니까?”
그의 질문은 청중 전체의 생각을 대변하는 듯했다. 모두가 조던의 대답을 기다리며 그를 쏘아보았다.
조던은 침착하게 마이크를 잡았다.
“훌륭한 질문입니다. 그리고 그 질문에 답하기 위해, 우리는 ‘관심사의 분리’라는 원칙을 다시 생각해 볼 필요가 있습니다.”
그는 스크린에 LikeButton 컴포넌트의 가상적인 코드를 띄웠다.
전통적인 방식 (템플릿 엔진)
<!-- like_button.hbs -->
<button class="{{#if isLiked}}liked{{/if}}">좋아요 ({{count}})</button>
// like_button.js
var template = Handlebars.compile(source);
var data = { isLiked: true, count: 10 };
var html = template(data);
// ... 그리고 이 html을 DOM에 삽입하는 로직 ...
리액트 방식 (JSX)
// LikeButton.js
render: function() {
var text = '좋아요 (' + this.state.count + ')';
return <button className={this.state.isLiked ? 'liked' : ''}>{text}</button>;
}
“왼쪽의 전통적인 방식은, 표면적으로는 HTML과 자바스크립트라는 ‘기술’을 분리한 것처럼 보입니다. 하지만 정말 그럴까요?” 조던이 반문했다.
“템플릿 파일 안을 보십시오. {{#if isLiked}} 같은 조건문과 {{count}} 같은 변수가 있습니다. 이것은 더 이상 순수한 HTML이 아닙니다. 로직이 섞여 들어간, 또 다른 종류의 프로그래밍 언어일 뿐입니다. 우리는 결국 두 개의 다른 파일에서, 두 개의 다른 문법으로 로직을 작성하고 있는 셈이죠. 그리고 이 둘을 연결하기 위해 복잡한 데이터 바인딩과 템플릿 컴파일 과정을 거쳐야 합니다.”
그의 논리는 명확했다. 기존 방식은 기술을 분리했을 뿐, 정작 하나의 버튼을 구성하는 데 필요한 ‘관심사’는 두 개의 파일에 흩어져 있었다.
“리액트의 접근 방식은 다릅니다.” 그는 오른쪽의 JSX 코드를 가리켰다.
“우리는 기술을 섞는 대신, ‘관심사’를 하나로 묶습니다. ‘좋아요 버튼’이라는 하나의 관심사를 표현하는 데 필요한 마크업 구조와 렌더링 로직은, 본질적으로 매우 밀접하게 연결되어 있습니다. 우리는 이 둘을 억지로 분리하는 대신, LikeButton이라는 단 하나의 컴포넌트 안에 함께 두는 것이 더 합리적이라고 생각했습니다.”
“즉, 저희는 기술(HTML, JS)을 분리하는 것이 아니라, 재사용 가능하고 독립적인 컴포넌트 단위로 관심사를 분리하는 겁니다.”
그의 대답은 논리 정연했지만, 청중의 마음을 움직이기에는 역부족이었다. 그들에게 JSX는 여전히 자바스크립트의 순수성을 해치는 불순물처럼 보였다. 수년간 지켜온 신념을 하루아침에 바꾸기란 어려운 일이었다.
질문은 계속 이어졌다.
“그럼 디자이너들은 어떻게 작업하죠? 디자이너가 자바스크립트 파일을 열어서 JSX를 수정해야 합니까?”
“그 문법은 표준이 아니지 않습니까? 브라우저가 이해하지도 못하는 코드를 위해 별도의 컴파일 단계를 거쳐야 한다는 건 너무 번거롭습니다.”
거대한 장벽이었다. 조던과 리액트 팀은 기술적인 우월성만으로는 넘을 수 없는, 사람들의 오랜 관습과 고정관념이라는 더 큰 벽에 부딪히고 있었다. 그들은 자신들의 아이디어가 세상에 받아들여지기까지, 길고 험난한 싸움이 필요할 것임을 직감했다.
