[TIL] React 중급: 클래스형 컴포넌트의 라이프-사이클 구현
6. Class Component: Life-cycle 구현
-
클래스형 컴포넌트의 라이프 사이클(기본)
componentWillMount
render
componentDidMount
-
클래스형 컴포넌트의 라이프 사이클(확장)
componentWillMount
render
componentDidMount
❗ 화면에 출력할 값이 변경되는 이벤트 동작 후
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
-
클래스형 컴포넌트 코드
var classStyle = 'color:red';
class ClassComp extends React.Component {
state = {
number:this.props.initNumber,
date:(new Date()).toString()
}
componentWillMount() {
console.log('%cclass => componentWillMount',classStyle);
}
componentDidMount() {
console.log('%cclass => componentDidMount',classStyle);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('%cclass => shouldComponentUpdate',classStyle);
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('%cclass => componentWillUpdate',classStyle);
}
componentDidUpdate(nextProps, nextState) {
console.log('%cclass => componentDidUpdate',classStyle);
}
render() {
console.log('%cclass => render',classStyle);
return (
<div className="container">
<h2>Class style component</h2>
<p>Number : {this.state.number}</p>
<p>Date : {this.state.date}</p>
<input type="button" value="random" onClick= {
function() {
this.setState({number:Math.random()})
}.bind(this)
}></input>
<input type="button" value="date" onClick= {
function() {
this.setState({date:(new Date()).toString()})
}.bind(this)
}></input>
</div>
)
}
}
Author And Source
이 문제에 관하여([TIL] React 중급: 클래스형 컴포넌트의 라이프-사이클 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minami/TIL-React-중급-클래스형-컴포넌트의-라이프-사이클-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)