리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

import React from 'react' ; class App extends React.Component { constructor(props) { super(props); this.state = { number: 0 } }; increaseNumber() { this.setState({number: this.state.number + 1 }) } render() { return ( < div > < button onClick = {this.increaseNumber.bind(this)} > 증가 < / button > < Content curNumber = {this.state.number} > < / Content > < / div > ); } } class Content extends React.Component { componentWillMount() { console .log( 'Component WILL MOUNT!' ) //컴포넌트 마운트 전 } componentDidMount() { console .log( 'Component DID MOUNT!' ) //컴포넌트 마운트 후 (Render 실행 완료) } componentWillReceiveProps(newProps) { console .log( 'Component WILL RECIEVE PROPS!' ) //새로운 Props 받은 후 } shouldComponentUpdate(newProps, newState) { //True : 렌더링 O, False : 랜더링 X //console.log(newProps, newState) return true ; } componentWillUpdate(nextProps, nextState) { //컴포넌트 업데이트 전 console .log( 'Component WILL UPDATE!' ); } componentDidUpdate(prevProps, prevState) { //컴포넌트 업데이트 후 (Render 실행 완료) console .log( 'Component DID UPDATE!' ) } componentWillUnmount() { //컴포넌트 언마운트 전 console .log( 'Component WILL UNMOUNT!' ) } render() { return ( < div > < h3 > {this.props.curNumber} < / h3 > < / div > ); } } export default App; Colored by Color Scripter

from http://niceman.tistory.com/58 by ccl(S) rewrite - 2020-03-06 08:54:28