[React] 컴포넌트의 라이프 싸이클

컴포넌트 라이프사이클

1) initialization

—setup props and state

2) Mounting

—componentWillMount

—render

—componentDidMount

3) Updation : props나 state가 바뀜을 의미 (⇒랜더 메소드 다시 실행)

—1) props : componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate

—2)states : shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate

**shouldComponentUpdate : true거나 false

4) Unmounting

—componentWillUnmount

state의 라이프사이클 메소드

// ****< 클래스 컴포넌트 >**** 

class className extends React.Component {
    state = {
        age : 1
    }
    // 실제로 클래스가 인스턴스화 될때는, constructor부분임
    constructor(props){
        super(props);
        console.log('컨스트럭터 실행',props)

    }
    
    render(){
        // render메소드 호출
        return(
            <div>{this.props.name} = {this.state.age}</div>
        )
    }
		// render전에 실행될 것
		componentWillMount(){
        console.log('componentWillMount 실행')
    }
    // render실행 후에 실행될 것
    componentDidMount(){
        console.log('componentDidMount 실행')
    }
}

ReactDOM.render( <className name="길동이"/>, document.querySelector('#id값')

>> 콘솔창에 찍히는 순서 : constructor → componentWillMount → render → componentDidMount

+, 근데 만약 여기서 componentDidMount에 state를 +1 해주는 함수를 추가하면?

class 클래스명 extends React.Component {
    state = {
        age : 1
    }
    // 실제로 클래스가 인스턴스화 될때는, constructor부분임
    constructor(props){
        super(props);
        console.log('컨스트럭터 실행',props)
    }
    
    render(){
        // render메소드 호출
        return(
            <div>{this.props.name} = {this.state.age}</div>
        )
    }
    // render전에 실행될거고, 
    componentWillMount(){
        console.log('componentWillMount 실행')
    }
    // render실행 후에 실행될 것
    componentDidMount(){
        console.log('componentDidMount 실행');
        setInterval(()=>{this.setState((state)=>({...state}, age : this.state.age + 1))},1000)
    }

state를 변경하면, 랜더가 실행되니 계속 랜더 메소드도 호출되면서 콘솔에 찍히게 된다.

props의 라이프싸이클 관련 메소드

		
		//얘는 props에만 관여하고
		//
		componentWillReveiveProps(nextProps){

    }
    // return은 true, false를 한다. 
    // true를 리턴하면, 이어서 렌더할 준비를 하는데
    // return이 false이면 렌더가 다시되지 않을 것이다. 
		// 프롭스만 변경되도, 스테이트만 변경되도 실행된다. 
    shouldComponentUpdate(nextProps,nextState){

    }
		// 컴포넌트가 재렌더링되기 직전에 불린다.
    componentWillUpdate(nextProps,nextState){

    }
		// 컴포넌트가 재렌더링을 마치면 불린다. 
    componentDidUpdate(prevProps,prevState){
        
    }

순서)

action creator를 통해서 action을 만드는데

action에는 type과 payload가 들어있다(페이로드는 안들어있을수도 있음)

reducer에는 reducer( previousState, action )이 들어오는데

reducer는 action.type에 맞춰 state를 업데이트 해준다(업데이트 안할수도 있고)

스토어

이니셜 스테이트가 안들어가잇음 각 리듀서의 최초값이 들어옴

createStore ( 리듀서 함수, 이니셜state , enhancer )