1
2
3
4
5
6
7
constructor(props){
  super(props);
  console.log('constructor') 

  console.log(props) // {name: "sw"}
  this.state = { count: 0, name : '[기본 name값]' };
}

1
2
3
4
5
6
7
8
9
10
11
12
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    console.log(props, state); // {name: "sw"}, {count: 0, name: "[기본 name값]"}

    if(props.name !== state.name){
      return { name: props.name }; // (*)
    }
    return null; // 아무 일도 일어나지 않음
  }

  // (*) 다음에 실행되는 render 메서드에서 값이 변경된 것을 확인할 수 있다. 
  // {name: "sw"}, {count: 0, name: "sw"}

1
2
3
componentDidMount(){
  console.log("componentDidMount");
}

1
2
3
4
5
6
shouldComponentUpdate(nextProps, nextState){
  console.log("shouldComponentUpdate");
  console.log(nextProps, nextState); // count를 +1 한 경우 => {name: "sw"}, {count: 1, name: "sw"}
  
  return nextState.count <= 10; // count 값이 10 이하인 경우에만 render(), componentDidUpdate() 이 실행됨
}

1
2
3
4
5
6
7
8
getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log("getSnapshotBeforeUpdate");

  if(prevState.count >= 5){ // count 값이 6 이상이 되면 '스냅샷!' 을 반환한다.
    return "스냅샷!";
  }
  return null;
}

1
2
3
4
5
6
7
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");

    console.log(prevProps, prevState, snapshot);
    // count 값이 5 이하인 경우 => {name: "sw"}, {count: 0~4, name: "sw"}, undefined
    // count 값이 6 이상인 경우 => {name: "sw"}, {count: 5~n, name: "sw"}, "스냅샷!" 
  }

1
2
3
componentWillUnmount() {
  console.log("componentWillUnmount");
}

1
2
3
4
5
6
static getDerivedStateFromError(error) {
  console.log("componentWillUnmount");
  console.error(error);

  return { hasError: true };
}

1
2
3
4
5
6
componentDidCatch(error, info) {
  console.error("componentDidCatch");

  console.log('error',error)
  console.log('info',info)
}