props의 개념이 구체화되면서, 팀원들은 이 새로운 데이터 전달 방식을 더 직관적으로 이해할 수 있는 비유를 찾기 시작했다. 다양한 아이디어가 오갔지만, 가장 큰 공감대를 형성한 것은 조던 워크가 제시한 ‘선물’이라는 비유였다.
“props는 부모가 자식의 생일(렌더링)에 주는 선물 상자와 같습니다.”
조던은 화이트보드에 부모 컴포넌트(<Post>)와 자식 컴포넌트(<Avatar>)를 그렸다. 그리고 부모에서 자식으로 향하는 화살표 위에 선물 상자를 하나 그렸다.
“부모인 <Post>는 자식인 <Avatar>를 세상에 내보내면서, ‘이걸 가지고 앞으로 잘 살아보렴’ 하고 선물 상자 하나를 건네줍니다. 이 상자가 바로 props 객체죠.”
그는 선물 상자 안에 내용물을 그려 넣었다.
{ imageUrl: '...', shape: 'circle' }
“상자 안에는 아바타가 살아가는 데 필요한 모든 정보가 들어있습니다. 어떤 이미지를 보여줘야 하는지, 모양은 어떻게 해야 하는지 같은 것들이죠. 자식인 <Avatar>는 이 선물 상자를 열어보고(this.props를 읽고), 그 내용물에 따라 자신의 모습을 꾸밉니다.”
이 비유는 단방향 데이터 흐름을 명확하게 보여주었다. 선물은 언제나 부모가 자식에게 일방적으로 주는 것이다. 자식이 부모에게 선물을 달라고 조르거나, 부모의 다른 살림살이를 넘볼 수는 없다.
맷은 이 비유에 한 가지 질문을 더했다.
“만약 자식이 받은 선물이 마음에 들지 않으면요? 예를 들어, <Avatar>가 ‘나는 원형 말고 사각형 모양이 더 좋은데?’라고 생각하면, 선물 상자 안의 shape 값을 스스로 바꿀 수 있나요?”
“절대 안 됩니다.” 조던이 단호하게 말했다. “그것이 이 비유의 가장 중요한 규칙입니다. 자식은 부모에게 받은 선물을 절대 훼손할 수 없습니다.”
그는 선물 상자 그림 위에 ‘변경 불가(Read-Only)’라고 크게 적었다.
“선물은 부모의 소유입니다. 자식은 그저 받아서 사용할 권리만 있을 뿐, 마음대로 내용을 바꾸거나 더럽힐 수 없습니다. 만약 아바타의 모양을 바꾸고 싶다면, 자식이 스스로 결정하는 것이 아니라, 부모인 <Post>가 다음 생일에 shape: 'square'가 담긴 새로운 선물 상자를 줘야만 합니다.”
이 규칙은 리액트의 예측 가능성을 지키는 핵심적인 방어 장치였다. 만약 자식 컴포넌트가 제멋대로 props를 수정할 수 있다면, 데이터의 흐름은 다시 엉망진창이 될 터였다. 데이터가 어디서 어떻게 변경되었는지 추적하는 것이 불가능해지며, 이는 그들이 벗어나고자 했던 ‘스파게티 코드’의 세계로 회귀하는 것을 의미했다.
props는 부모가 자식에게 주는, 내용물을 절대 바꿀 수 없는 선물.
이 명확한 비유는 팀원들의 머릿속에 props의 역할과 책임을 깊이 각인시켰다. 컴포넌트는 오직 위에서 내려온 데이터에만 의존하며, 그 데이터를 절대 변질시키지 않는다.
이로써 리액트의 ‘불변성’ 철학이 처음으로 API에 모습을 드러냈다. 이제 팀원들은 또 다른 중요한 질문에 답해야 했다.
‘부모에게 받는 선물 말고, 컴포넌트가 스스로 만들고 변화시키는 자신만의 물건은 어떻게 다뤄야 하는가?’
이 질문은 리액트의 두 번째 데이터 소스, state의 등장을 예고하고 있었다.
