리액트 LifeCycle

    componentWillMount() {
        // v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용
        console.log("componentWillMount");
    }

    componentDidMount() {
        // 외부 라이브러리 연동: D3, masonry, etc
        // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
        // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
        console.log("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        // this.props 는 아직 바뀌지 않은 상태
        console.log("componentWillReceiveProps");
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        // 여기서는 setState 를 하는 것이 아니라
        // 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
        // 사용됩니다.
        /*
        if (nextProps.value !== prevState.value) {
          return { value: nextProps.value };
        }
        return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
        */
        console.log("getDerivedStateFromProps");
    }

    shouldComponentUpdate(nextProps, nextState) {
        // return false 하면 업데이트를 안함
        // return this.props.checked !== nextProps.checked
        console.log("shouldComponentUpdate");
    }

    componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdqte");
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        // DOM 업데이트가 일어나기 직전의 시점입니다.
        // 새 데이터가 상단에 추가되어도 스크롤바를 유지해보겠습니다.
        // scrollHeight 는 전 후를 비교해서 스크롤 위치를 설정하기 위함이고,
        // scrollTop 은, 이 기능이 크롬에 이미 구현이 되어있는데, 
        // 이미 구현이 되어있다면 처리하지 않도록 하기 위함입니다.
        /*
        if (prevState.array !== this.state.array) {
            const {
                scrollTop, scrollHeight
            } = this.list;

            // 여기서 반환 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있습니다.
            return {
                scrollTop, scrollHeight
            };
        }
        */
        console.log("getSnapshotBeforeUpdate");
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
    	/*
        if (snapshot) {
            const { scrollTop } = this.list;
            if (scrollTop !== snapshot.scrollTop) return; // 기능이 이미 구현되어있다면 처리하지 않습니다.
            const diff = this.list.scrollHeight - snapshot.scrollHeight;
            this.list.scrollTop += diff;
        }
        */
        console.log("componentDidUpdate");
    }

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