리액트 팀은 외부 개발자들에게 생명주기 메서드의 중요성을 가장 명확하게 보여줄 수 있는 예제가 필요하다고 판단했다. 그들은 1초마다 화면의 시간이 갱신되는 간단한 <Clock> 컴포넌트를 만들기로 했다. 이 예제는 componentDidMount와 componentWillUnmount가 어떻게 짝을 이뤄 동작하는지를 완벽하게 보여줄 수 있었다.
조던 워크가 팀원들 앞에서 직접 코드를 작성하며 시연했다.
- 컴포넌트의 뼈대와 초기 상태 정의
"먼저, <Clock> 컴포넌트의 기본 구조부터 시작하겠습니다. 이 컴포넌트는 현재 시간을 state로 가지고 있어야 합니다."
var Clock = React.createClass({
// 초기 상태를 현재 시간으로 설정한다.
getInitialState: function() {
return {
date: new Date()
};
},
// ... 생명주기 메서드들 ...
// render는 오직 현재 this.state.date를 화면에 표시하는 역할만 한다.
render: function() {
return React.createElement(
'div',
null,
'현재 시간: ', this.state.date.toLocaleTimeString()
);
}
});
이 코드만으로는 시계가 움직이지 않는다. 최초 렌더링 시점의 시간만 표시하고 멈춰있을 뿐이다. 시계의 초침을 움직이게 하려면, 1초마다 state를 갱신해주는 메커니즘이 필요했다.
componentDidMount에서 타이머 시작
"이제 컴포넌트가 화면에 성공적으로 나타났을 때, 우리는 시간을 업데이트하는 타이머를 시작해야 합니다. 그 최적의 장소는 바로 componentDidMount입니다."
componentDidMount: function() {
// 1초(1000ms)마다 tick 메서드를 호출하는 타이머를 설정한다.
// 나중에 이 타이머를 식별하고 제거하기 위해 ID를 인스턴스에 저장한다.
this.timerID = setInterval(
this.tick,
1000
);
},
// 1초마다 state를 현재 시간으로 업데이트하는 메서드
tick: function() {
this.setState({
date: new Date()
});
},
tick 메서드는 setState를 호출하여 date 상태를 현재 시간으로 계속 갱신한다. setState가 호출될 때마다 render가 자동으로 재호출되고, 화면의 시간은 1초마다 새롭게 그려진다. 이제 시계는 살아 움직이기 시작했다.
componentWillUnmount에서 타이머 정리
"하지만 이대로 끝내면, 우리는 메모리 누수를 가진 시한폭탄을 만드는 것과 같습니다. <Clock> 컴포넌트가 화면에서 사라질 때, 이 setInterval을 반드시 정리해주어야 합니다. componentWillUnmount가 바로 그 역할을 합니다."
componentWillUnmount: function() {
// 컴포넌트가 사라지기 직전에, 시작했던 타이머를 깨끗하게 제거한다.
clearInterval(this.timerID);
}
이제 <Clock> 컴포넌트는 완벽해졌다. 스스로의 생명주기에 맞춰 타이머를 시작하고, 멈추는 모든 책임을 스스로 지게 되었다.
이 <Clock> 예제는 단순했지만, 리액트의 생명주기 철학을 명쾌하게 보여주었다.
- 부작용(Side Effect)은
componentDidMount에서 시작한다. - 시작한 부작용은 반드시
componentWillUnmount에서 정리한다. render는 이 모든 부작용으로부터 격리되어 순수하게 유지된다.
팀원들은 이 예제가 외부 개발자들에게 리액트의 안정성과 예측 가능성을 설명하는 가장 강력한 무기가 될 것이라고 확신했다. 리액트는 단순히 화면을 그리는 도구가 아니라, 시간의 흐름 속에서 컴포넌트의 상태를 안전하게 관리하는 정교한 시스템임을 이 작은 시계가 증명하고 있었다.
