** 라이프 사이클 메소드의 경우 클래스 컴포넌트에서만 해당되는 내용이기 때문에 여기에서는 클래스 컴포넌트만 다룸
** 함수 컴포넌트의 경우 Hooks부분에서 자세하게 다룰 예정
출처: https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-state
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
Mount -> Update -> Unmount
출처: https://www.codecademy.com/learn/react-101/modules/react-102-lifecycle-methods-u/cheatsheet
class Clock extends React.Component {
constructor(props) {
super(props);
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>
);
}
}
코드출처: 리액트 공식문서
componentWillMount() -> render() -> componentDidMount()
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate