[react.js] react Component Life Cycle API

리액트 컴포넌트 라이프 사이클 API

이 포스팅은

VELOPERT 님의 포스팅을 아주많이 참조하였습니다;;

(출처 : https://velopert.com/1130 )

1. 컴포넌트 라이프 사이클 API 순서

컴포넌트를 생성 할 때는 

constructor -> componentWillMount -> render -> componentDidMount 

순으로 진행됩니다.

컴포넌트를 제거 할 때는 componentWillUnmount 메소드만 실행됩니다.

컴포넌트의 prop이 변경될 때엔 

componentWillReceiveProps -> shouldComponentUpdate -> 

componentWillUpdate-> render -> componentDidUpdate 

순으로 진행됩니다.

 state가 변경될 떄엔 props 를 받았을 때 와 비슷하지만 shouldComponentUpdate 부터 시작됩니다.

그림으론 아래와 같이 보시면 됩니다.

2. 각 메소드들이 하는 역할

1) constructor

3 4	constructor(props){     super(props);     console.log("constructor"); }

  constructor(props) {
        console.log("컨텍트 생성자 시작");
        super(props);
        this.state = {
            contactData: [
                {name: "Abet", phone: "010-0000-00035"},
                {name: "Betty", phone: "010-0000-0002"},
                {name: "Charlie", phone: "010-0000-0003"},
                {name: "David", phone: "010-0000-0004"}
            ]
        };
        console.log("컨텍트 생성자 끝");
    }

-> 생성자 메소드 입니다. 컴포넌트가 처음 만들어질때 실행되며 이곳에서 기본 state를 정할 수 있습니다.

2) componentWillMount

componentWillMount(){

    console.log("componentWillMount");

}

-> 컴포넌트가 DOM 위에 만들어지기 전에 실행 됩니다.

3) render

render() {
        return (
            <button onClick={this.handleClick.bind(this)}>
                Remove selected contact
            </button>
        );
    }

-> 컴포넌트 렌더링을 담당합니다.

4) componentDidMount

componentDidMount(){

    console.log("componentDidMount");

}

-> 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드 입니다.

이 안에서 다른 JS 프레임워크를 연동하거나. setTomeout, setInterval및 Ajax 처리를 넣습니다.

--> https://medium.com/@taeho.leon.kim/javascript-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0-8fc74fab2140#.8nmyw5gjt

이곳에서는 해당 API가 렌더링을 시잓하는 즉시 실행한다고 이야기 한다. 즉 렌더링이 끝날때까지 기다려주지 않는다고 말이다.

아직 정확히 확인을 해보지 못하였다. 

5) componentWillReceiveProps

componentWillReceiveProps(nextProps){

    console.log("componentWillReceiveProps: " + JSON.stringify(nextProps));

}

-> 컴포넌트가 prop을 새로 받았을 때 실행 됩니다. porp에 따라 state를 업데이트 해야 할 떄 사용 하면 유용 합니다.

     이 안에서 this.setState()를 해도 추가적으로 렌더링 하지 않습니다.

6) shouldComponentUpdate

2 3 4

shouldComponentUpdate(nextProps, nextState){     console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));     return true; }

-> 이전 포스팅에서 사용했던 메소드. prop나 state가 변경 되었을때 리렌더링을 할지 말지 정하는 메소드.

    실제로 활용 할때는 필요하는 값을 비교해서 반환하도록 사용 한다. (이전 포스팅 참조)

2017/02/27 - [Yame Programmer/react.js] - [react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()

7) componentWillUpdate

componentWillUpdate(nextProps, nextState){

    console.log("componentWillUpdate: " + JSON.stringify(nextProps) + " " + JSON.stringify(nextState));

}

-> 컴포넌트가 업데이트 되기 전에 실행된다. 이 메소드 안에서는 this.setState()를 사용하면 안된다. 무한루프에 빠져들어 버린다.

8) componentDidUpdate

2 3	componentDidUpdate(prevProps, prevState){     console.log("componentDidUpdate: " + JSON.stringify(prevProps) + " " + JSON.stringify(prevState)); }

-> 컴포넌트가 리렌더링을 마친 후 실행된다

9) componentWillUnmount

componentWillUnmount(){

    console.log("componentWillUnmount");

}

-> 컴포넌트가 dom 에서 사라진 후 실행되는 메소드