라이프 사이클 한눈에 보기 >> http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

1. 마운트

• 해당 컴포넌트가 브라우저에 없었다가 나타나는 것.

1.1 constructor

constructor(props) {
    super(props);
    this.resizeMap = this.resizeMap.bind(this);
}

• 컴포넌트 생성.
• super(props) : 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 component 클래스가 지닌 생성자 함수 호출
• state 초기화
• 메소드 this 바인딩

1.2 getDerivedStateFromProps

static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
        return {
          isScrollingDown: props.currentRow > state.lastRow,
          lastRow: props.currentRow,
        };
    }
    return null;
}

• 클래스 메소드.
• 바뀐 props값을 state에 동기화 할 때 사용. setstate와 같은 효과. ( 바뀐 props값을 state에 넣어줌 )
• 기본값으로 return null을 적어주어야 하며 이는 변화가 없음을 뜻함.
• 클래스메소드이기 때문에 this사용 불가.

1.3 render

render() {
  return (
    <div className='Loading'>
      <ClipLoader
        sizeUnit={"px"}
        size={100}
        color={'#203CC6'}
      />
    </div>
  )
}

• UI 렌더링 역할을 하는 유일한 필수 메서드.
• this.props와 this.state 분석하여 jsx객체를 리턴.
• render()에서는 state 변경이 불가능. 브라우저와 상호작용 X
• 업데이트 되는 경우에 재호출
• 아무것도 보여주고 싶지 않으면 null, flase를 반환.

1.4 componentDidMount

componentDidMount() {
  // 외부 라이브러리 연동: slick, masonry 등
  // 외부 api호출, DOM 에 관련된 작업 등
}

• 컴포넌트가 브라우저에 반영된 후 호출.
• 외부 라이브러리 연동
• 외부 api 호출
• dom 관련 작업
• 이벤트 등록

2. 업데이트

• 이미 브라우저 상에 존재하는 컴포넌트가 다시 렌더링 되는 것.
• 업데이트를 하는 경우는 총 4가지.

1) props변경
2) state변경
3) 부모 컴포넌트 리렌더링
4) this.forceUpdate() 강제 렌더링 트리거

2.1 shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  // return false 하면 업데이트를 안함
  return true;
  // 기본적으로는 true를 반환
}

• 컴포넌트 최적화 작업
• 업데이트가 필요없는 컴포넌트의 리렌더링을 막음. (업데이트 시 호출되는 메서드들 중 scu이후 메서드가 호출 안됨)
• forceUpdate 호출 시에는 이 과정이 생략.

2.2 getSnapshotBeforeUpdate

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

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

• render함수가 그린 후, 실제 dom에 반영되기 직전에 호출하여 새로운 내용으로 업데이트 되기 전 간직할 정보를 빼내는 데 사용.
• 값이 바뀌어서 dom에 적용되기 이전 값을 가져올 필요가 있을 때 사용.
• 여기서 리턴하는 값은 componentDidUpdate 에서 3번째 파라미터로 받아올 수 있음

2.3 componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
  // componentDidMount처럼 side effect들을 처리
}

• 파라미터를 통해 이전 props와 state를 조회할 수 있으며, snapshot은 getSnapshotBeforeUpdate에서 반환한 값입니다.
• componentDidMount처럼 side effect들을 처리할 때 사용합니다.
• setState를 사용할때는 꼭 조건문과 함께 사용해야 합니다. (무한루프)

3. 언마운트

• 브라우저 상에 존재하고 있던 컴포넌트를 제거하는 것

3.1 componentWillUnmount

componentWillUnmount() {
  // 이벤트 및 연동된 외부 라이브러리 제거
}

• 등록했던 이벤트와 외부 라이브러리 호출 제거
• setInterval 제거 등등...

---

수정
2019.05.14
2019.09.05