component lifecycle

1. componentWillMount 

 - 랜더링이 되기 전에 실행

 - 컴포넌트가 DOM이 만들어지기 전에 실행

 - v16.3 이후부터는 deprecated되었으며 UNSAFE_componentWillMount로 사용가능 

 

2.componentDidMount

 - 랜더링이 된 후에 실행

 - 이 안에서 다른 자바스크립트 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용

 - D3, masonry처럼 DOM을 사용해야 하는 외부 라이브러리 연동

 - 해당 컴포넌트에서 필요로하는 데이터를 요청 하기 위해 axios, fetch 등을 통하여 ajax요청이나 DOM의 속성을 읽거나 직접 변경하는 작업

 

3.componentWillReceiveProps(nextProps)

 -  this.props는 아직 바뀌지 않은 상태 / 새로운 프롭스를 받았을 때 실행

 - props에 따라 state를 리렌더링 할 때 사용하면 유용

 - setState사용 가능

 - v16.3 이후부터는 deprecated되었으며 UNSAFE_componentWillReceiveProps로 사용가능

 - getDerivedStateFromProps 로 대체 될 수 있다

 

4. static getDerivedStateFromProps(nextPros, prevState)

  - 특정 props가 바뀔 때 설정하고 설정하고 싶은 state값을 리턴하는 형태로 사용

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.value !== prevState.value) {
        return { value : nextProps.value }
    }
    return null 
//null을 리턴하면 업데이트 할 것이 없다는 의미
}

5.shouldComponentUpdate(nextProps, nextState)

 - props/state가 변경되었을 때  리렌더링을 해야할 지 말아야 할지 정하는 부분

 - 필요한 비교를 하고 return을 true/false 한다

 - JSON.stringify를 사용하여 여러 field를 비교할 수 있다

 

6.componentWillUpdate(nextProps, nextState)

 - 컴포넌트가 리렌더링 되기 전에 실행

 - setState 사용 금지, setState를 하면 무한 루프에 빠지게 된다

 - v16.3 이후부터는 deprecated되었으며  getSnapshotBeforeUpdate로 대체 될 수 있다

 

7. getSnapshotBeforeUpdate

 - render -> getSnapshotBeforeUpdate -> 실제 DOM에 변화 발생 -> componentDidUpdate

 - DOM변화가 일어나기 직전의 DOM상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아 올 수 있게 된다 

getSnapshotBeforeUpdate(prevProps, prevState) {
    if(prevState.array !== this.state.array){
        const {
            scrollTop, scrollHeight
        } = this.list;
        return {
            scrollTop, scrollHeight
        };
    }
}

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;
    }

8. componentDidUpdate(prevProps, prevState, snapshot)

 - 컴포넌트가 리렌더링 된 후에 실행

 - setState 사용 금지

 

9. componentWillUnmount

 - 컴포넌트가 DOM에서 사라진 후 실행

 - 등록했던 이벤트를 제거하고 setTimeout을 걸었다면 clearTimeout을 통해 제거

 - 외부라이브러리를 사요한게 있고 해당 라이브러리에 dispose기능이 있다면 여기서 호출하면 됨

컴포넌트가 생성 될 때

 constructor -> componentWillMount -> render -> componentDidMount

 

컴포넌트가 제거 될 때

 componentWillUnmount

 

컴포넌트가 업데이트 될 때

componentWillReceiveProps -> shouldComponentUpdate

리턴이 false일 때 중지 리턴이 true일 때 다음 실행

-> componentWillUpdate ->  getSnapshotBeforeUpdate -> 실제 DOM에 변화 발생 ->  componentDidUpdate

 

출처 : https://velopert.com/3631