버전이 올라가면서 바뀐점!

componentWillMount => getDerivedStateFromProps

componentWillReceiveProps => getDerivedStateFromProps
componentWillUpdate => getSnapshotBeforeUpdate (dom 에 적용되기 적전)

// 이전에는 props가 변경되었을 때만 호출 되었지만, 이제는 state만 변경되도 호출된다.
// 시간의 흐름에 따라 변하는 props에 state 가 의존할 때 사용 추천. 드문경우
      static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps', nextProps, prevState);
        // return 에 새로운 state 를 설정 해 줄 수 있다.
        return {
          age: 300,
        };
      }

let i = 0;
    class App extends React.Component {
      state = {
        list: []
      };

      render() {
        return(
          <div id="list" style={ {height: 100, overflow: "scroll"}}>
            { this.state.list.map(i => {
              return (<div>{i}</div>)
            }) }
          </div>
        );
      }

      componentDidMount() {
        setInterval(() => {
          this.setState(state => ({
            list: [...state.list, i++]
          }))
        }, 1000);
      }

      getSnapshotBeforeUpdate(prevProps, prevState) {
        if(prevState.list.length === this.state.list.length) return null;
        const list = document.querySelector('#list');
        console.log(list.scrollHeight, list.scrollTop);
        return list.scrollHeight - list.scrollTop;
      }

      componentDidUpdate(prevProps, prevState, snapShot) {
        if(snapShot === null) return;
        const list = document.querySelector('#list');
        list.scrollTop = list.scrollHeight - snapShot;
        console.log(list.scrollTop);
      }
    }

    ReactDOM.render(<App name="Malza"/>, document.querySelector('#root'));

Component 에러 캐치