리액트의 핵심 API와 생명주기 모델이 완성되어 감에 따라, 팀은 자신들이 만들어낸 ‘클래스 컴포넌트’의 전체적인 모습을 조망하기 시작했다. React.createClass로 탄생한 이 존재는 더 이상 단순한 UI 템플릿이나 함수 덩어리가 아니었다.
그것은 자신만의 삶을 가진, 하나의 작은 생명체와도 같았다.
조던 워크는 화이트보드에 한 컴포넌트의 일생을 다시 한번 그려 내려갔다.
- 설계와 탄생 (Conception & Birth)
- 개발자는
React.createClass라는 유전자 설계도를 통해 컴포넌트의 청사진을 만든다. 이 청사진에는 컴포넌트의 모든 잠재력이 담겨있다. React.createElement가 호출되면, 이 설계도로부터 실제 ‘인스턴스(instance)’가 태어난다.getInitialState(): 인스턴스는 태어나는 순간, 자신만의 첫 기억(state)을 갖게 된다.
- 세상과의 첫 만남 (Mounting)
render(): 세상에 나가기 전, 자신의 첫 모습(버추얼 DOM)을 결정한다.- 리액트가 이 모습을 실제 DOM에 반영하여, 컴포넌트는 비로소 화면이라는 세상에 모습을 드러낸다.
componentDidMount(): 세상에 나온 직후, 컴포넌트는 주변 환경(DOM, 서버, 외부 라이브러리)과의 상호작용을 시작한다. 타이머를 켜고, 데이터를 요청하는 등 본격적인 삶을 시작한다.
- 성장과 변화 (Living & Updating)
- 부모의 영향 (
props): 부모로부터 새로운props를 받으며 외부 환경의 변화에 적응한다. - 자신의 의지 (
state): 사용자 입력과 같은 내부적인 사건에 반응하여setState를 통해 스스로의 기억을 바꾼다. shouldComponentUpdate(): 변화에 직면했을 때, 이 변화에 반응하여 모습을 바꿀지 말지를 스스로 결정하는, 일종의 ‘판단력’을 보여준다.render(): 변화가 필요하다고 판단되면, 새로운 모습(버추얼 DOM)을 다시 결정한다.componentDidUpdate(): 모습이 바뀐 직후, 그 변화에 따른 추가적인 행동(스크롤 조작 등)을 취한다. 이 과정은 컴포넌트가 살아있는 동안 수없이 반복된다.
- 소멸 (Unmounting)
- 부모의 결정에 따라 더 이상 필요 없어지면, 컴포넌트는 세상에서 사라질 준비를 한다.
componentWillUnmount(): 사라지기 직전, 세상에 남겨두었던 자신의 흔적들(타이머, 이벤트 리스너)을 깨끗하게 정리하며 자신의 생을 책임감 있게 마감한다.
이 일련의 과정을 보며, 팀원들은 자신들이 만든 것이 단순한 코드 조각이 아님을 깨달았다.
React.createClass로 정의된 컴포넌트는, 데이터(props, state)라는 영양분을 섭취하고, 생명주기 메서드라는 신경계를 통해 외부와 소통하며, render라는 행위를 통해 자신을 표현하는, 완벽하게 캡슐화된 하나의 작은 유기체였다.
이 ‘생명체’들은 서로 부모-자식 관계를 맺으며 거대한 군집(컴포넌트 트리)을 이룬다. 각 개체는 오직 자신의 삶에만 충실하면 되었다. 복잡한 전체 시스템의 안위는 리액트라는 거대한 생태계가 알아서 조율해주었다.
이러한 관점은 개발의 방식을 근본적으로 바꾸었다. 개발자는 더 이상 거대한 기계의 톱니바퀴 하나를 만드는 부품공이 아니었다. 독립적인 작은 생명체를 창조하고, 그 생명체의 삶의 규칙을 정의하는 ‘창조주’에 가까워졌다.
리액트 클래스 컴포넌트.
그것은 리액트의 철학이 응축된 결정체이자, 복잡한 UI 개발의 혼돈 속에서 질서를 창조하기 위한 가장 우아하고 강력한 해답이었다. 이제 이 생명체를 세상에 선보일 준비가 거의 끝나가고 있었다.
