에밀리와 같은 얼리 어답터들의 긍정적인 후기가 조금씩 퍼져나가면서, 커뮤니티의 시선은 아주 미세하게나마 변하기 시작했다. 개발자들은 이제 JSX에 대한 맹목적인 비난에서 한 걸음 물러나, 리액트의 또 다른 핵심 개념인 ‘가상 DOM(Virtual DOM)’에 대해 더 깊은 질문을 던지기 시작했다.
처음의 질문은 단순했다. “그래서, 그게 jQuery보다 빠른가요?”
이 질문에 답하기 위해, 몇몇 호기심 많은 개발자들은 직접 벤치마크 테스트를 만들어 공유했다. 수천 개의 목록 아이템을 렌더링하고, 무작위로 업데이트하는 테스트였다. 결과는 놀라웠다. 대부분의 복잡한 시나리오에서, 리액트의 가상 DOM 기반 업데이트는 수작업으로 최적화한 jQuery 코드보다 더 빠르거나, 최소한 비슷한 성능을 보여주었다.
이 결과는 많은 이들에게 충격을 주었다. 기계가 인간의 최적화보다 나을 수 있다는 사실을 받아들이기 힘들었기 때문이다. 하지만 진짜 깨달음은 속도 비교, 그 너머에 있었다.
당시 한 유명 기술 블로거이자 숙련된 자바스크립트 개발자였던 피터는, 이 벤치마크 결과를 보고도 여전히 회의적이었다. 그는 자신의 블로그에 이렇게 썼다.
“리액트의 성능은 인상적이다. 하지만 나는 여전히 내 손을 믿는다. 나는 내 애플리케이션의 구조를 누구보다 잘 알기에, DOM을 가장 효율적으로 조작하는 방법을 알고 있다. 리액트의 범용적인 알고리즘이 내 수작업 최적화를 이길 수는 없다.”
그는 자신의 주장을 증명하기 위해, 사용자가 아이템을 드래그 앤 드롭으로 재정렬할 수 있는 복잡한 목록 컴포넌트를 직접 만들어보기로 했다. 처음에는 jQuery로, 그 다음에는 리액트로.
jQuery로 구현하는 과정은 고통 그 자체였다.
mousedown이벤트를 감지한다.- 드래그하는 동안
mousemove이벤트에 따라 아이템의 위치를top,leftCSS 속성으로 계속 업데이트한다. - 다른 아이템 위로 지나갈 때, 위치를 바꿔주기 위한 복잡한 로직을 구현한다.
mouseup이벤트가 발생하면, 최종 위치를 확정하고, 해당 DOM 요소를 실제로detach()했다가 올바른 위치에insertBefore()해야 한다.
이 모든 과정에서, 그는 수십 개의 상태 변수(‘지금 드래그 중인가?’, ‘현재 마우스 위치는 어디인가?’ 등)를 직접 관리해야 했다. 코드는 금방 수백 줄을 넘어섰고, 엣지 케이스를 처리하다가 수많은 버그를 만들어냈다.
며칠간의 사투 끝에, 그는 마지못해 리액트로 같은 기능을 구현하기 시작했다.
그는 컴포넌트의 state에 아이템 목록의 순서가 담긴 배열 하나만 두었다.
{ items: [ {id: 1, text: 'A'}, {id: 2, text: 'B'}, ... ] }
그리고 드래그 앤 드롭 로직을 처리하는 외부 라이브러리를 사용해, 드롭이 완료되는 순간 단 하나의 함수만 호출하도록 했다. 그 함수 안에는 단 한 줄의 핵심 코드만 있었다.
this.setState({ items: newOrderedArray });
그게 전부였다.
그는 코드를 실행하고, 아이템을 드래그해서 다른 위치에 놓았다. 화면의 목록이 완벽하게 재정렬되었다.
피터는 순간 망치로 머리를 맞은 듯한 충격에 휩싸였다. 그는 혼란에 빠졌다.
‘DOM 요소를 삭제하는 코드는 어디 있지? 새로 추가하는 코드는? 순서를 바꾸는 그 복잡한 로직은 대체 어디에 있는 거지?’
어디에도 없었다. 그가 jQuery로 며칠 밤낮을 새워 작성했던 그 모든 DOM 조작 코드가, 리액트에서는 단 한 줄도 필요 없었다. 그는 그저 최종 결과물, 즉 ‘새로운 순서의 배열’이라는 데이터만 선언했을 뿐이다. 그 데이터를 보고 이전 DOM과 비교하여, 가장 효율적인 방법으로 실제 DOM을 조작하는 모든 더럽고 어려운 일은 리액트의 가상 DOM과 Diffing 알고리즘이 전부 알아서 처리해버린 것이다.
그 순간, 피터는 가상 DOM의 진정한 가치를 깨달았다.
그것은 단순히 성능을 위한 트릭이 아니었다. 그것은 개발자를 ‘DOM 조작’이라는 지옥에서 해방시켜주는, 위대한 추상화였다.
그는 자신의 블로그에 두 번째 글을 올렸다.
“나는 틀렸다. 가상 DOM의 진짜 가치는 속도가 아니다. 그것은 개발자의 정신적 해방이다.”
이 글은 커뮤니티에 거대한 파장을 일으켰다. 개발자들은 비로소 깨닫기 시작했다. 리액트가 제공하는 것은 단순히 빠른 렌더링이 아니라, UI 개발의 복잡성을 근본적으로 다른 차원에서 해결하는 새로운 패러다임이라는 것을.
