참고자료
https://velog.io/@joonsikyang/React-Project-Lifecycle

https://ko.reactjs.org/docs/state-and-lifecycle.html

state 를 공부할려면 어쩔수 없이 생명주기에 대해서 공부를 해야만 한다.
state 와 라이프 사이클을 같이 얘기하도록 하겠습니다.

class Content extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
    console.log('Component DID MOUNT!')
  }
  componentWillReceiveProps(nextProps) {    
    console.log('Component WILL RECIEVE PROPS!')
  }
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
    console.log('Component WILL UNMOUNT!')
  }
  render() {
    return (
        <div>
          <h1>{this.props.sentDigit}</h1>
        </div>
    );
  }
}

console 를 찍어보면

라이프 사이클 순서

1. constructor
2. render
3. componentDidMount
4. (fetch 완료 )
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)

constructor

클래스 컴포넌트는 항상 props 로 기본 constructor 를 호출해야 합니다 .
항상 먼저요 !!!

componentWillMount

componentWillMount(){
  console.log("componentWillMount);
  }

컴포넌트가 DOM 위에 만들어지기 전에 실행된다.

render

render () {
  ...
}

컴포넌트 랜더링을 담당한다.

componentDidMount

componentDidMount 메소드는 컴포넌트 출력물이 DOM 에 렌더링 된 후에 실행됩니다.

컴포넌트가 만들어지고 첫 렌더링을 다 마친후 실행되는 메소드 이다 .
이 안에서 다른 Javascript 프레임워크를 연동하거나 , setTimeout ,
setInterval 및 Ajax 처리 등을 넣는다 .

대부분 여기서 API 데이터를 받아온다.

componentWillReceiveProps

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

컴포넌트가 props 를 새로 받았을 때 실행된다.
props 의 변경에 따라 state 를 얻데이트 해야 할때 사용하면 유용합니다.
이 안에서 this.setState() 를 하더라도 추가적으로 랜더링하지 않는다.

shouldComponentUpdate

	shouldComponentUpdate(nextProps, nextState){
    	console.log("shouldComponentUpdate: " + JSON.stringify(nextProps) + " 						"+JSON.stringify(nextState));
    	return nextProps.id !== this.props.id;
	}

컴포넌트 업데이트 직전에 호출되는 메소드입니다.
props 또는 state 가 변경되었을 때 , 재랜더링을 여부를 return 값으로 결정합니다.

componentWillUpdate

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

컴포넌트가 업데이트 되기 전에 실행이 됩니다.
이 메소드 안에서 this.setState() 를 사용할 경우 무한루프에 빠지므로 주의해야 합니다.

componentDidUpdate

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

컴포넌트 업데이트 직후에 호출되는 메소드입니다.

부모 - 자식 데이터 전달 시 발생하는 요류

부모가 API 에서 받은 데이터를 자식에게 props 값으로 전달하여 자식 내부에서 그 데이터에 접근하여 사용하는 경우 입니다.

부모 - 자식 Lifecycle 순서

1. 부모 constructor
2. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
3. 자식 constructor
4. 자식 render
5. 자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
6. 부모 componentDidMount
7. 부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
8. 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
9. 자식 render
10. 자식 componentDidUpdate
    (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감.)
11. 부모 componentDidUpdate
    (componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)