조던 워크가 띄운 슬라이드에는, 그가 팀과 함께 수없이 다듬었던 리액트의 핵심 코드가 담겨 있었다. 제목은 'A Simple Component'였다.
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name}</p>;
},
});
ReactDOM.render(<HelloWorld name="World" />, document.body);
코드가 화면에 나타난 직후, 청중석은 미묘한 정적에 휩싸였다. 그들의 시선은 한곳에 꽂혀 있었다. 바로 자바스크립트 코드 안에, 따옴표 하나 없이 버젓이 자리 잡고 있는 HTML과 유사한 태그들이었다.
<p>Hello, {this.props.name}</p>
<HelloWorld name="World" />
청중석 앞줄에 앉아있던 한 유명 개발자가 옆 사람에게 무언가 속삭이는 것이 보였다. 그의 표정에는 노골적인 의아함과 불쾌감이 서려 있었다.
조던은 예상했던 반응이라는 듯, 침착하게 설명을 이어갔다.
“이것이 리액트 컴포넌트를 작성하는 방식입니다. 우리는 이 XML과 유사한 문법을 JSX라고 부릅니다. 이것은 템플릿 언어가 아닙니다. 자바스크립트의 문법적 확장입니다.”
그는 JSX가 실제로는 컴파일 과정에서 React.createElement 함수 호출로 변환된다는 사실을 설명했다.
<p>Hello</p> → React.createElement('p', null, 'Hello')
“JSX는 선택사항입니다. 원하신다면 React.createElement를 직접 사용하셔도 됩니다. 하지만 우리는 JSX를 통해 개발자가 UI의 구조를 더 직관적으로 파악하고 작성할 수 있다고 믿습니다.”
그의 설명에도 불구하고, 청중의 반응은 싸늘했다.
수년간 웹 개발 커뮤니티는 ‘관심사의 분리(Separation of Concerns)’라는 원칙을 금과옥조처럼 여겨왔다.
- HTML은 구조(Structure)를 책임진다.
- CSS는 표현(Presentation)을 책임진다.
- JavaScript는 행동(Behavior)을 책임진다.
이 세 가지는 절대로 섞여서는 안 되는, 신성불가침의 영역으로 여겨졌다. 개발자들은 HTML 파일에 인라인으로 style 속성을 넣거나 <script> 태그를 남발하는 것을 최악의 안티 패턴으로 배우고 가르쳐왔다.
그런데 지금, 세계 최대의 소셜 네트워크 서비스를 만드는 페이스북의 엔지니어가 무대에 서서, 자바스크립트 파일 안에 HTML을 집어넣는 것이 자신들의 ‘모범 사례’라고 이야기하고 있었다.
청중에게 이것은 혁신이 아니라, 명백한 ‘후퇴’로 보였다.
마치 자동차가 발명된 시대에, 더 빠르고 멋진 마차를 만들었다고 자랑하는 것처럼 느껴졌다.
“저게 대체 뭐야…”
“자바스크립트에 HTML을? 90년대 방식으로 돌아가자는 건가?”
청중석 곳곳에서 웅성거리는 소리가 들려왔다. 그들의 표정에는 존경이나 호기심 대신, 당혹감과 실망감이 번져갔다. 버추얼 DOM이라는 흥미로운 아이디어에 잠시 보였던 호의적인 분위기는 순식간에 차갑게 식어버렸다.
조던은 그들의 반응을 온몸으로 느끼고 있었다. 그는 JSX가 가져올 논란을 누구보다 잘 알고 있었다. 하지만 그는 이것이 더 나은 개발 방식을 위한, 불가피한 선택이라고 믿었다.
그는 다음 슬라이드로 넘어갔다. 거기에는 리액트의 또 다른 핵심 철학, ‘단방향 데이터 흐름’에 대한 내용이 담겨 있었다. 하지만 이미 청중의 마음은 닫히기 시작한 뒤였다. 그들의 머릿속은 온통 하나의 질문으로 가득 차 있었다.
‘왜? 대체 왜 자바스크립트 안에 HTML을 집어넣는 미친 짓을 해야만 하는가?’
발표는 아직 끝나지 않았지만, 리액트의 첫인상은 이미 결정되고 있는 듯했다. 그리고 그것은 결코 긍정적이지 않았다.
