React.Component – React

react 생명주기( lifecycle )는 component또는 page가 랜더링되는 방법이라고 생각하면 된다.

처음 page가 랜더링 될 때 (Mount)

1. Contstructor

컴포넌트의 생성자 메소드이다

여기서는 context, defaultProps, state를 초기화/저장합니다

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

2. getDerivedStateFromProps

ComponentWillMount

컴포넌트/페이지가 랜더링되기 전에 실행되는 매서드이다.

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

return 값이 있으면 state를 변경한다. return null을 하게 되면 아무것도 하지 않는다.