리액트는 무대에서 박수 대신 야유를 받았다

2013년 5월, 페이스북이 리액트를 처음 공개한 무대는 박수가 아니라 한숨과 야유로 가득 찼다.
발표자는 페이스북 엔지니어 조던 워크(Jordan Walke)였고, 그가 화면에 띄운 코드가 문제였다.

자바스크립트 파일 안에 HTML 태그가 그대로 박혀 있었다.
오늘날에는 입문서마다 나오는 익숙한 문법이지만, 당시 청중에게는 "이 사람이 실수한 건가?" 싶은 광경이었다.
JSConf US 회의장의 개발자들은 실시간으로 조롱 트윗을 날렸고, 분위기는 기대감이 아니라 당혹감에 가까웠다.

신입사원이 첫 발표 자리에서 회사 전체로부터 "그렇게 일하면 안 됩니다"라는 말을 들은 상황과 같았다.
그런데 그 라이브러리는 오늘날 전 세계 프론트엔드의 절반 가까이가 쓰는 표준이 됐다.

리액트의 JSX는 10년 묵은 분리 원칙을 어겼다

개발자들이 JSX를 보고 분노한 이유는 단순했다.
그것이 10년간 신성시되던 규칙을 정면으로 부쉈기 때문이다.

당시 웹 개발의 절대 규칙은 관심사 분리(Separation of Concerns)였다.
디자인(HTML), 스타일(CSS), 로직(JavaScript)을 각자 다른 파일에 두는 것이 모범 사례였고, 모든 입문서가 이를 첫 장에서 가르쳤다.
요리 학교에서 "재료는 반드시 따로 손질하라"고 평생 배웠는데, 누군가 무대에 올라 "통째로 섞는 게 정답입니다"라고 선언한 상황이었다.

JSX란 자바스크립트 파일 안에 HTML 태그를 그대로 쓸 수 있게 해주는 문법이다.
이것은 첫 줄부터 관심사 분리를 위반했다.
그러니 청중이 "10년간 틀린 걸 배운 사람이 나왔다"고 느낀 건 당연한 반응이었다.

페이스북 개발자 Pete Hunt가 베를린에서 반박했다

5개월 뒤, Pete Hunt(피트 헌트)는 베를린 무대에서 단 한 문장을 던졌다.
"여러분이 지켜온 모범 사례가, 사실은 모범이 아닙니다."

2013년 10월, 독일 베를린에서 열린 JSConf EU 무대였다.
그는 발표 제목을 'Rethinking Best Practices(모범 사례 다시 생각하기)'로 달았고, 5개월 전 야유받던 바로 그 개념을 들고 다시 올라섰다.
광장에서 야유받던 사람이 다음 분기에 같은 광장으로 돌아와 "이제 제가 왜 옳은지 보여드리겠습니다"라고 말하는 장면이었다.

피트 헌트의 논리는 간단했다.
관심사 분리라고 부르던 것은 사실 파일 종류의 분리였을 뿐이다.
HTML과 JavaScript를 다른 파일로 나누는 게 진짜 분리가 아니라, 하나의 버튼과 다른 버튼을 나누는 게 진짜 분리라는 주장이었다.

그 발표는 리액트를 향한 분위기를 바꿔놓기 시작했다.
야유받던 진영이 논리를 들고 돌아오자, 이번에는 청중이 팔짱을 풀기 시작했다.

야유받던 라이브러리는 결국 프론트엔드의 표준이 되었다

야유받던 라이브러리는 표준이 되었고, 한때 그것을 야유한 사람들은 이제 그것을 가르치고 있다.
2015년, 인스타그램과 넷플릭스가 리액트로 전면 전환했다.
그로부터 불과 몇 년 뒤, 전 세계 프론트엔드 개발자의 약 40%가 리액트를 주력으로 쓰게 됐다.

출판사 100곳에서 거절당한 신인 작가의 책이 베스트셀러가 되고, 결국 국어 교과서에 실리는 것과 같은 이야기다.
한때 야유의 근거였던 JSX는 이제 신입 개발자가 가장 먼저 배우는 문법이 됐다.

더 아이러니한 건 관심사 분리다.
10년 동안 모든 교과서가 신성시하던 그 규칙은, 리액트가 표준이 되면서 교과서에서 조용히 지워졌다.
이제 입문서들은 컴포넌트 단위 분리를 올바른 방법으로 소개한다.

2013년 5월 그 무대에서 야유받던 코드 한 줄이, 결국 웹 개발의 문법 자체를 다시 썼다.
오늘 누군가 처음 배우는 리액트 강의의 첫 예제가, 그날 야유받던 바로 그 JSX인지도 모른다.