세상에 고하다, 리액트!

"여러분, 오늘 저희는 페이스북에서 웹 UI 개발의 '모범 사례(Best Practices)'라고 여겨왔던 것들에 대해 다시 한번 생각해보게 만든 기술을 소개하고자 합니다."

JSConf EU 2013의 메인 스테이지. 톰 오치노의 차분하면서도 자신감 넘치는 목소리가 장내에 울려 퍼졌다. 수백 명의 개발자들의 시선이 일제히 무대 위 스크린과 두 명의 발표자, 톰과 조던 워크에게 쏠렸다.

톰은 먼저 당시 웹 개발, 특히 페이스북이 직면했던 문제점들을 능숙하게 풀어놓았다. 복잡하게 얽힌 스파게티 코드, 예측 불가능한 상태 변화, 거대한 애플리케이션에서의 유지보수 어려움… 많은 개발자들이 고개를 끄덕이며 공감하는 분위기였다.

"이런 문제들을 해결하기 위해, 저희는 기존의 방식을 답습하는 대신, 완전히 새로운 접근법을 고민했습니다."

그리고 마침내, 그 이름이 세상에 처음으로 공식적으로 선언되었다.

"React."

스크린에 선명하게 찍힌 로고. 장내는 조용했다. 대부분의 청중에게는 생소한 이름. '또 다른 자바스크립트 라이브러리인가?' 하는 의구심 어린 시선들이 느껴졌다.

톰은 이어서 리액트의 핵심 철학을 설명하기 시작했다. 'UI는 상태의 함수다', '선언적인 뷰(Declarative Views)', 그리고… 논란의 중심이 될 바로 그 개념.

"리액트의 핵심 아이디어 중 하나는 바로 가상 DOM(Virtual DOM)입니다."

스크린에 가상 DOM의 개념도가 나타나자, 장내 곳곳에서 작게 웅성거리는 소리가 들려왔다.

"상태가 변경될 때마다, 리액트는 전체 UI에 해당하는 가벼운 자바스크립트 객체 트리, 즉 가상 DOM을 새로 생성합니다. 그리고 이전 가상 DOM과 비교하여 실제 변경이 필요한 부분만을 찾아내어, 실제 DOM에는 최소한의 업데이트만 수행합니다."

이 설명은 많은 이들에게 충격으로 다가왔다. '매번 전체를 새로 만든다고? 그게 효율적이라고?' 상식적으로 이해하기 어려운 개념이었다. 일부 청중의 얼굴에는 노골적인 의심과 혼란의 빛이 서렸다.

이제 조던 워크가 나설 차례였다. 마이크를 넘겨받은 그의 손은 여전히 미세하게 떨렸지만, 눈빛만은 확고했다. 그는 직접 키보드 앞에 앉아 라이브 코딩 데모를 시작했다.

"백문이 불여일견입니다. 리액트가 실제로 어떻게 작동하는지 보여드리겠습니다."

그는 간단한 실시간 데이터 업데이트 예제를 리액트로 구현하는 과정을 보여주었다. 상태(state) 정의, 상태에 따라 UI를 묘사하는 render 함수, 그리고 JSX 문법.

// 발표 중 시연된 코드 (개념)
function RealtimeCounter() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds((s) => s + 1); // 1초마다 상태 업데이트
    }, 1000);
    return () => clearInterval(intervalId); // 컴포넌트 사라질 때 인터벌 정리
  }, []); // 빈 배열: 컴포넌트 마운트 시 한 번만 실행

  // 상태(seconds)에 따라 UI가 '선언적으로' 정의된다!
  return (
    <div>
      <h1>{seconds}</h1>
      <p>Seconds have passed!</p>
    </div>
  );
}

저자: 독자의 이해를 높이기 위해 클래스형 컴포넌트 대신 함수형 컴포넌트 코드를 사용했습니다.

청중들은 숨죽여 그의 코딩을 지켜보았다. HTML처럼 보이는데 자바스크립트 함수 안에 들어있는 이상한 문법(JSX). 상태를 직접 변경하는 대신 setSeconds 같은 함수를 호출하는 방식. 그리고 가장 놀라운 것은, seconds 상태가 1초마다 변경될 때마다 RealtimeCounter 함수 전체가 다시 호출되는 것처럼 보였지만, 실제 화면에서는 오직 숫자(<h1>{seconds}</h1>) 부분만 깜빡임 없이 부드럽게 업데이트된다는 사실이었다!

"보시다시피, 저희는 상태가 변할 때마다 UI 전체를 새로 그리는 것처럼 코드를 작성했습니다. 하지만 리액트의 가상 DOM과 최적화된 비교 알고리즘 덕분에, 실제 브라우저에는 오직 변경된 숫자 부분만 효율적으로 업데이트됩니다. 개발자는 더 이상 DOM을 직접 조작하는 복잡함에서 벗어나, 오직 상태와 UI의 관계에만 집중할 수 있습니다."

조던의 설명과 함께, 데모 화면은 리액트의 마법을 시각적으로 증명하고 있었다. 장내의 분위기가 조금씩 술렁이기 시작했다. '저게 정말 가능하다고?' 하는 놀라움과 '어쩌면… 저 방식이 더 나을 수도 있겠는데?' 하는 호기심이 뒤섞였다.

발표는 컴포넌트 기반 아키텍처의 장점, 단방향 데이터 흐름(플럭스 개념의 암시)으로 이어졌다. 톰과 조던은 리액트가 단순히 빠르기만 한 라이브러리가 아니라, 복잡한 UI를 더 예측 가능하고 유지보수하기 쉽게 만드는 새로운 '패러다임'임을 강조했다.

발표가 끝나자, 잠시 정적이 흘렀다. 그리고 곧이어 박수 소리가 터져 나왔다. 열광적인 환호는 아니었지만, 분명 긍정적인 관심과 호기심이 담긴 박수였다.

하지만 진짜 싸움은 이제부터 시작이었다. Q&A 세션. 예상대로 날카로운 질문들이 쏟아졌다.

"가상 DOM의 성능 오버헤드는 정말 무시할 만한 수준입니까?"
"JSX? 저건 자바스크립트와 HTML의 관심사 분리 원칙을 위배하는 것 아닙니까?"
"그래서 리액트는 프레임워크인가요, 라이브러리인가요? MVC에서 V만 다루는 것 같은데, 나머지(M, C)는 어떻게 하라는 거죠?"

톰과 조던은 준비한 대로 침착하게 답변했지만, 모든 의구심을 완전히 해소하기는 어려웠다. 특히 JSX 문법과 'Just the V(View)'라는 리액트의 철학은 뜨거운 논쟁거리가 될 것임을 예감케 했다.

무대에서 내려온 조던은 긴장이 풀리면서 다리가 후들거렸다. 성공이었을까? 실패였을까? 아직은 알 수 없었다. 하지만 한 가지는 분명했다. 리액트라는 이름은 이제 세상에 던져졌다. 그 이름이 앞으로 어떤 파장을 일으키고, 어떤 운명을 맞이하게 될지는 이제 전 세계 개발자 커뮤니티의 반응에 달려 있었다.

운명의 주사위는 던져졌다.