[React] React의 생명주기(LifeCycle)

React 생명주기 다이어그램

리액트의 생명주기(LifeCycle)란

리액트의 생명주기란 컴포넌트의 생성, 업데이트, 제거 과정을 뜻한다.

1단계 - 생성(Mounting)

생성 단계는 컴포넌트가 constructor에 의해 초기화되고 rendering 과정을 거쳐 DOM에 최초로 그려지는 단계이다.
생성 단계의 흐름을 정리해보면

1. 컴포넌트의 base state가 constructor에 의해서 초기화 된다.
2. getDerivedStateFromProps 실행(props로 받아온 것을 state에 넣어주고 싶을 때 사용)
3. 초기화가 완료되면 render() 메소드가 실행이 된다.
4. 실제로 DOM에 컴포넌트를 mount한다.
5. mounting이 완료되면 componentDidMount 메소드가 실행된다.(해당 컴포넌트에서 필요한 데이터를 요청하기 위해 axios,fetch를 통하여 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업 진행)
   요약 : constructor -> getDerivedStateFromProps -> render -> componentDidMount 순으로 실행

// getDerivedStateFromProps
static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

-> getDerivedStateFromProps에서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용이 컴포넌트의 state로 설정이 된다, null 반환하게 되면 아무 일도 발생하지 않는다.

2단계 - 변경(Updating)

변경 단계는 컴포넌트에 전달된 props 혹은 state에 변화가 생길 경우에 일어난다. 변화가 생기면 리액트는 해당 컴포넌트의 re-rendering을 진행한다.
변경 단계의 흐름을 정리해보면

props가 새롭게 전달되거나, setState()를 통해 상태(state)가 업데이트되면
1. getDerivedStateFromProps
2. shouldComponentUpdate(컴포넌트가 리렌더링할지 말지를 결정하는 메서드 - Virtual DOM에 그릴지 말지 결정하는 메소드)
3. 기존 컴포넌트를 새롭게 render()한다.
4. getSnapshotBeforUpdate (변경이 진행되기 직전의 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용 가능)
3. DOM에 변화된 부분을 Update한다.
4. componentDidUpdate() 메소드가 실행된다.
요약 : 새로운 Props 또는 State 변경 -> getDerivedStateFromProps -> render -> getSnapshotBeforUpdate -> componetnDidUpdate 순으로 실행

// shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
    return nextState.number % 10 !== 4;
  }

-> 최적화할 때 사용하는 메소드 , 리액트는 Virtual DOM에 변경 내용을 모아서 실제 DOM에는 변경사항만 변경되게 되지만, shouldComponentUpdate를 활용하면 Virtual DOM에도 새롭게 랜더링을 하지 않도록 만들 수 있다.

3단계 - 제거(Unmounting)

제거 단계는 DOM에 나타나있던 컴포넌트가 제거된 경우 사라지기 전에 componentWillUnmount()가 실행된다. (DOM에 직접 등록했었던 이벤트를 제거하고, setTimeout을 사용한 것이 있다면 clearTimeout를 할 수 있다.)

요약

리액트의 컴포넌트는 생성 -> 업데이트 -> 제거의 생명 주기를 갖고 있다. 생성 단계에서는 constructor에 의해서 state가 초기화된 뒤, render 메소드가 실행되면서 DOM에 컴포넌트를 마운트하게 된다. 마운트가 완료되면 componentDidMount라는 생명주기 메소드가 실행이 된다. 업데이트 단계에서는 props가 새롭게 전달되거나, 상태가 업데이트 되는 경우 re-rendering을 진행하면서 DOM에 변화된 부분을 업데이트 한다. 업데이트가 완료되면 componentDidUpdate 생명주기 메소드가 실행된다. 마지막으로, 제거 단계에서는 DOM에 나타나있던 컴포넌트가 마운트 해제될 경우 제거되기 직전에 componentWillUnmount 생명주기 메소드가 실행되며, componentDidMount()에서 생성된 작업 등을 정리할 때 사용된다.

reference

https://react.vlpt.us/basic/25-lifecycle.html