조던 워크는 키보드 위에서 손가락을 멈췄다. 아이디어의 조각들은 모였지만, 그것들을 엮어낼 첫 번째 실마리를 찾지 못하고 있었다. 그의 머릿속을 맴도는 가장 근본적인 질문은 이것이었다.
‘컴포넌트 함수는, 대체 무엇을 반환(return)해야 하는가?’
가장 쉬운 답은 HTML 문자열이었다.
return '<button>좋아요</button>';
하지만 그는 이미 그 길이 막다른 길임을 알고 있었다. 단순한 문자열 덩어리. 그건 퇴보였다. 구조가 없기에 분석하거나 조작하기 어렵고, 태그가 제대로 닫혔는지 검증할 방법도 없으며, 보안에 치명적이었다. XHP가 해결했던 바로 그 문제들을 자바스크립트 세계에서 똑같이 반복하는 꼴이었다.
그는 무언가 다른 것이 필요했다. 구조를 가지고 있고, 자바스크립트가 쉽게 다룰 수 있으며, 무엇보다 ‘비교’가 가능한 형태의 결과물.
그 순간, XHP의 본질이 그의 뇌리를 다시 한번 관통했다. XHP의 마법은 단순히 <?php echo '<div>'; ?>를 <div />로 바꾼 것이 아니었다. 그것은 <div>라는 텍스트를, 속성과 자식을 가질 수 있는 객체(Object)로 변환시킨 데 있었다.
“그래… 객체야.”
조던의 손가락이 마침내 움직이기 시작했다. 그는 새로운 라이브러리의 심장이 될 첫 번째 함수를 작성했다. 함수는 HTML 문자열이 아닌, 단순한 자바스크립트 객체(Plain Old JavaScript Object)를 반환해야 했다. UI 요소의 정보를 담은, 일종의 명세서였다.
// 가상의 프로토타입 코드
// UI 요소에 대한 '설명서'를 만드는 함수
function createDescription(tagName, props, children) {
return {
tagName: tagName, // 예: 'div', 'button'
properties: props, // 예: { className: 'liked' }
children: children // 예: ['좋아요 취소'] 또는 다른 설명서 객체들
};
}
이 createDescription 함수는 UI를 직접 그리지 않는다. 그저 UI가 어떻게 생겨야 하는지에 대한 설명서를 만들 뿐이다.
이 함수를 사용하면, 이전에는 상상만 했던 LikeButton 함수를 실제로 구현할 수 있었다.
// 'LikeButton' 컴포넌트 함수
function LikeButton(data) {
if (data.isLiked) {
return createDescription(
'button',
{ className: 'liked' },
['좋아요 취소 (', data.likeCount, ')']
);
} else {
return createDescription(
'button',
{ className: '' },
['좋아요 (', data.likeCount, ')']
);
}
}
이제 LikeButton 함수를 호출하면, HTML 문자열이 아닌 구조화된 자바스크립트 객체가 튀어나왔다.
LikeButton({ isLiked: true, likeCount: 15 })
↓
{ tagName: 'button', properties: { className: 'liked' }, children: ['좋아요 취소 (', 15, ')'] }
조던은 희열을 느꼈다. 이 방식은 그가 원했던 모든 것을 해결해주었다.
첫째, 구조를 가지게 된다. 결과물은 더 이상 평평한 문자열이 아니라, 태그 이름, 속성, 자식 요소로 명확히 구분된 객체다.
둘째, 조립이 가능하다. 더 큰 컴포넌트는 작은 컴포넌트 함수를 호출하고, 그 결과로 나온 ‘설명서 객체’를 자신의 children 배열에 담기만 하면 됐다.
셋째, 안전하다. 모든 것은 순수한 데이터 객체이므로, 렌더링 파이프라인의 맨 마지막 단계에서 실제 DOM으로 변환될 때까지 보안 위협이 없다.
그리고 가장 중요한 것.
이것이 바로 비교가 가능한 ‘설계도’였다. 데이터가 변경되었을 때, 이전 설계도 객체와 새로 생성된 설계도 객체를 비교하여 어떤 부분이 바뀌었는지 정확히 찾아낼 수 있는 길이 열린 것이다.
조던 워크는 자신이 만든 createDescription 함수를 한참 동안 바라보았다. 이름도, 형태도 아직 조잡하기 짝이 없었다. 하지만 그는 확신했다. 그는 마침내 자신의 새로운 세계를 구성할 가장 기본적인 원자(Atom)를 발견한 것이다. 함수가 UI의 설명서를 반환한다. 이 단순한 원칙이 모든 것을 바꿔놓을 터였다.
