컴포넌트, 그 희미한 첫 모습

XHP의 도입은 성공적이었다. 페이스북의 서버 사이드 코드는 눈에 띄게 안정되고 깔끔해졌다. 개발자들은 더 이상 깨진 HTML 태그나 보안 취약점에 대한 공포에 떨지 않아도 되었다. 그러나 새로운 도구가 익숙해지자, 새로운 종류의 불편함이 고개를 들기 시작했다.

맷은 뉴스피드에 표시될 여러 개의 게시물을 렌더링하는 코드를 짜고 있었다. 그의 눈앞에는 XHP로 작성된, 훨씬 안전해진 코드가 놓여 있었다.

// 뉴스피드의 게시물들을 렌더링하는 XHP 코드
foreach ($posts as $post) {
  echo
    <div class="post">
      <div class="post-header">
        <img src={$post->authorAvatarUrl} />
        <strong>{$post->authorName}</strong>
      </div>
      <div class="post-body">
        <p>{$post->text}</p>
      </div>
      <div class="post-footer">
        <a href="#">좋아요</a>
        <a href="#">댓글 달기</a>
      </div>
    </div>;
}

분명 이전의 문자열 조합 방식보다는 월등히 나았지만, 맷은 어딘가 찜찜한 기분을 지울 수 없었다. 이 <div class="post">...</div> 구조가 게시물 데이터의 개수만큼 코드상에서 그대로 반복되고 있었다. 만약 게시물의 디자인이 조금이라도 바뀐다면, 이 구조를 사용한 모든 파일을 찾아다니며 똑같은 수정을 반복해야 했다.

그때, 그의 자리로 다가온 조던 워크가 모니터를 보며 물었다.
“맷, 지금 그 코드에서 가장 중요한 건 뭔가요?”

“네? 음… $posts 배열에 있는 게시물 데이터를 화면에 표시하는 거죠.”

“맞습니다. 그렇다면 저 수십 줄의 div와 strong 태그 구조는 본질이 아니지 않습니까? 일종의 ‘구현 세부사항’일 뿐이죠.”

조던은 회의실 화이트보드로 걸어가 마커를 들었다.
“이 게시물 전체를, 하나의 독립된 부품으로 만들면 어떨까요? 우리는 그 부품에게 그냥 ‘이 데이터를 가지고 너 자신을 그려줘’ 라고 말하기만 하는 겁니다.”

그는 화이트보드에 충격적인 코드를 적어 내려갔다.

// 1. :ui:post 라는 이름의 새로운 '부품'을 정의한다.
class :ui:post extends :x:element {
  // 이 부품이 어떤 데이터를 필요로 하는지 선언한다.
  attribute array postData;

  // 이 부품을 어떻게 그릴지 정의한다.
  protected function render() {
    $post = $this->:postData;
    return
      <div class="post">
        ... (이전의 복잡한 HTML 구조가 이 안에 들어감) ...
      </div>;
  }
}

// 2. 정의된 부품을 사용한다.
foreach ($posts as $post) {
  echo <ui:post postData={$post} />;
}

회의실에 있던 개발자들의 숨소리마저 멎었다. foreach 루프 안의 코드는 믿을 수 없을 만큼 간결해졌다. 복잡하게 얽혀있던 HTML 구조는 :ui:post 라는 이름의 클래스 안으로 완벽하게 숨겨졌다. 캡슐화(Encapsulation)였다.

이제 게시물의 디자인을 바꾸려면 :ui:post 클래스의 render 함수만 수정하면 그만이었다. 이 부품을 사용하는 수백 군데의 코드는 단 한 줄도 건드릴 필요가 없었다.

톰의 눈이 빛났다.
“이건… 단순히 코드를 줄이는 게 아니야. 우리만의 UI 라이브러리를 만드는 거잖아. ‘게시물 부품’, ‘댓글 부품’, ‘프로필 사진 부품’ 같은 것들을 미리 만들어두고, 필요할 때마다 조립해서 쓰는 방식!”

그렇다. 이것이 바로 컴포넌트(Component) 라는 개념의 희미한 첫 모습이었다. UI를 독립적이고 재사용 가능한 조각들로 나누어 다루는 혁명적인 아이디어.

조던 워크는 동료들의 뜨거운 반응을 보며 조용히 고개를 끄덕였다. 그는 이 ‘컴포넌트’라는 개념이야말로 복잡성을 정복할 열쇠임을 확신했다.

그러나 그의 시선은 이미 PHP 서버를 넘어, 사용자의 브라우저에서 꿈틀대는 자바스크립트의 혼돈을 향해 있었다.

‘이 아름다운 개념을… 저곳에서도 구현할 수만 있다면.’