render
,componentDidMount
,componentDidUpdate
, componentWillUnmount
와 같은 함수들은 React.Component
클래스에서 제공하는 것들이다.
즉, class를 사용해 컴포넌트를 생성할 때 사용되는 함수들이다.
class Clock extends React.Component {
constructor() {
super();
this.state = {
date: new Date()
};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
ReactDOM.render()
의 첫 번째 인자에서 Clock을 넘겨줄 때, React는 Clock 컴포넌트의 constructor
를 실행시킨다.
constructor
내에 있는 super()
는 extends한 React.Component
의 메서드들을 사용하기 위해 반드시 붙여준다. 또한 this.state = {}
에서 Clock의 초기상태 (여기서는 new Date)를 설정해 줄 수 있다.
이 후 render()
메서드가 호출된다.
render()
메서드 내에 return이 실행되면, componentDidMount()
메서드가 호출된다.
component내 tick 함수가 매초 실행될 수 있도록 timer 추가
매초 브라우저가 tick 메서드를 호출하면서 this.state.date
값이 변화.
이 때, componentDidUpdate()
를 선언해주면 state가 변경될 때 호출되지만, 정의하지 않았으므로 rander()가 다시 호출되면서 바뀐 부분이 변경.
DOM에서 Clock 컴포넌트가 삭제될 때 componentWillUnmount
가 호출되고 timer도 함께 멈추게 된다.