멘탈 모델 1: 리액트는 UI를 조립하는 레고 블록 공장이다

리액트 커뮤니티가 서서히 성장하고, 라이브러리의 기능이 안정화되면서 조던 워크는 새로운 과제에 직면했다. 그것은 ‘어떻게 하면 개발자들이 리액트를 더 쉽고 올바르게 이해하게 만들 것인가?’라는 교육의 문제였다. 수많은 개념과 API를 단순히 나열하는 것만으로는 리액트의 진정한 철학을 전달하기 어려웠다.

그는 팀원들과 신입 사원들을 모아 특별한 세션을 열었다. 그의 목표는 리액트의 핵심 개념들을 직관적인 ‘멘탈 모델(Mental Model)’로 정리해주는 것이었다.

“지난 몇 년간 우리가 만들어온 것을 한 문장으로 요약해 봅시다.”
조던은 화이트보드에 첫 번째 멘탈 모델을 적었다.

“리액트는 UI를 조립하는 레고 블록 공장이다.”

팀원들은 흥미로운 표정으로 그를 바라보았다.

“이 공장, 즉 React 라이브러리의 역할은 단 하나입니다. UI를 구성하는 작은 부품, 즉 ‘레고 블록’을 생산하는 것이죠.”

그는 설명을 이어갔다.
“공장에서 똑같은 모양의 블록을 계속 찍어내려면 무엇이 필요할까요? 바로 ‘금형(Mold)’입니다. 리액트의 세계에서 이 금형의 역할을 하는 것이 바로 우리가 React.createClass로 정의한 컴포넌트 설계도입니다.”

// '아바타 블록'을 만드는 금형을 설계한다.
var Avatar = React.createClass({
  render: function() { /* ... */ }
});

// '좋아요 버튼 블록'을 만드는 금형을 설계한다.
var LikeButton = React.createClass({
  render: function() { /* ... */ }
});

“Avatar나 LikeButton은 그 자체로 블록이 아닙니다. 블록을 만들기 위한 설계도이자 금형일 뿐이죠. 이 금형만 잘 만들어두면, 우리는 언제든지 필요할 때마다 블록을 생산해낼 수 있습니다.”

“그럼 실제 블록은 언제 만들어집나요?” 맷이 물었다.

“React.createElement를 호출할 때입니다.” 조던이 대답했다. “React.createElement(Avatar, ...) 코드는 공장에 ‘아바타 금형을 사용해서 블록 하나를 생산해주세요’라고 주문을 넣는 것과 같습니다. 이 주문을 통해 실제로 메모리에 생성된 결과물이 바로 우리가 다루는 ‘레고 블록’, 즉 리액트 엘리먼트(element)입니다.”

그는 이 비유의 가장 중요한 부분으로 넘어갔다.
“레고의 진짜 위대함은 무엇일까요? 바로 블록들을 조립해서 더 크고 복잡한 무언가를 만들 수 있다는 점입니다. 이것이 리액트의 컴포지션(Composition), 즉 조합의 본질입니다.”

var UserProfileCard = React.createClass({
  render: function() {
    return React.createElement('div', null, [
      // '아바타 블록'을 조립하고,
      React.createElement(Avatar, { user: this.props.user }),
      // '사용자 이름 블록'을 조립하고,
      React.createElement(UserName, { user: this.props.user }),
      // '친구 추가 버튼 블록'을 조립한다.
      React.createElement(AddFriendButton, { user: this.props.user })
    ]);
  }
});

“<UserProfileCard>라는 더 큰 작품을 만들기 위해, 우리는 미리 만들어둔 ‘아바타 블록’, ‘이름 블록’, ‘버튼 블록’을 가져다 끼우기만 하면 됩니다. 각각의 블록은 자신이 다른 어떤 블록과 연결되는지 알 필요가 없습니다. 그저 자신의 모양과 역할을 충실히 수행하면 되죠. 이것이 바로 캡슐화입니다.”

이 멘탈 모델은 모든 것을 명확하게 만들었다.

• 리액트: 레고 블록 공장
• React.createClass: 블록을 만드는 ‘금형’(설계도)을 제작하는 행위
• React.createElement: 금형을 사용해 실제 ‘블록’(엘리먼트)을 생산하는 주문
• 컴포넌트 조합: 블록들을 조립하여 더 큰 작품을 만드는 행위

“이제 우리는 더 이상 거대한 하나의 UI 덩어리를 조각하는 예술가가 아닙니다.” 조던이 결론을 내렸다. “우리는 재사용 가능한 표준 부품(블록)을 설계하고, 그 부품들을 조립하여 견고한 구조물을 만드는 엔지니어입니다. 이것이 리액트 개발의 핵심입니다.”

팀원들은 고개를 끄덕였다. 복잡하게만 느껴졌던 개념들이 ‘공장과 블록’이라는 단순한 모델 안에서 완벽하게 제자리를 찾았다. 이제 그들은 이 공장에서 생산된 블록들이 어떻게 살아 움직이는지, 그 두 번째 멘탈 모델을 배울 준비가 되었다.