React Component 의 라이프사이클 이벤트

1. 이벤트 분류

   1. 마운팅 (한번만 실행) → 갱신 (여러번 실행) → 언마운팅 (한번만 실행)
   2. constructor() : 엘리먼트를 생성하여 기본 속성과 상태를 설정할 때 실행된다.
   3. componentWillMount() : DOM에 삽입하기 전에 실행된다.
   4. componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행된다.
   5. componentWillReceiveProps(nextProps) : 컴포넌트가 속성을 받기 직전에 실행된다.
   6. shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 갱신되는 조건을 정의해서 재렌더링을 최적화할 수 있다. 불 값을 반환한다.
   7. componentWillUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 직전에 실행된다.
   8. componentDidUpdate(prevProps, prevState) : 컴포넌트가 갱신된 후에 실행된다.
   9. componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전에 실행되며, 구독한 이벤트를 제거하거나 다른 정리 작업을 수행할 수 있다.

2. 이벤트 구현

   1. 라이프사이클 이벤트를 구현하려면 클래스에 메서드를 정의해야 한다.
   2. 예를 들어 componentDidMount()를 정의하면 컴포넌트 클래스의 엘리먼트가 DOM에 추가되었을 때 메서드를 호출한다. 이 메서드는 다른 프론트엔드 프레임워크나 라이브러리와 통합하는 코드나, 서버에 요청을 보내는 코드를 작성할 때 사용된다. 라이프사이클의 마운팅 시점에는 컴포넌트의 엘리먼트가 실제 DOM에 반영되어 자식 엘리먼트를 포함한 모든 엘리먼트에 접근할 수 있기 때문이다. 모든 렌더링 작업이 완료된 후에 실행된다. 만약 componentDidMount()를 정의하지 않는다면 이 이벤트에 대해 아무런 코드도 실행하지 않는다.

3. componentWillMount

   1. v16.3 이후부터는 UNSAFE_componentWillMount() 로 사용 (더이상 사용 X)

4. componentDidMount

   1. 외부 라이브러리 연동, 컴포넌트에서 필요한 데이터 요청 시 (Ajax, GraphQL..), DOM에 관련된 작업 (스크롤 설정, 크기 읽어오기 등)
   2. 컴포넌트가 화면에 나타나게 됐을 때 호출된다.

5. componentWillReceiveProps

   1. componentWillReceiveProps(nextProps) 형태로 사용
   2. 컴포넌트가 새로운 props 받게될 때 호출 → 주로 state가 props에 따라 변해야 하는 로직을 작성. 새로 받게 될 props는 nextProps로 조회할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전의 API가 된다.
   3. v16.3부터 UNSAFE_componentWillReceiveProps() 로 사용. 이 기능은 상황에 따라 새로운 API getDerivedStateFromProps로 대체될 수 있다.

6. static getDerivedStateFromProps(nextProps, prevState)

   1. props로 받아온 값을 state로 동기화하는 작업을 해주어야 하는 경우에 사용

   2. setState를 하는 것이 아니라 특정 props가 바뀔 때 설정하고, 설정하고 싶은 state 값을 리턴하는 형태로 사용.

       static getDerivedStateFromProps(nextProps, prevState) {
           if (nextProps.value !== prevState.value) {
               return {value: nextProps.value};
           }
           return null; //따로 업데이트 할 것은 없다.
       }    

7. shouldComponentUpdate

   1. return false 시 따로 업데이트 하지 않음
   2. 컴포넌트를 최적화하는 작업에서 유용하게 사용된다. 기본적으로 true를 반환하고 Virtual DOM에 리렌더링 하는것이 붎필요한 경우 방지하기 위해서 조건에 따라 false를 반환하면 해당 조건에는 render 함수를 호출하지 않는다.

8. componentWillUpdate

   1. shouldComponentUpdate에서 true를 반환했을때만 호출
   2. 애니메이션 효과를 초기화하거나 이벤트 리스너를 없애는 작업을 하고, 함수가 호출되고 난 다음에는 render()가 호출된다.
   3. 기존 기능은 v16.3 이후 getSnapshotBeforeUpdate로 대체 가능

9. getSnapshotBeforeUpdate(prevProps, prevState)

   1. API가 발생하는 시점
      1. render()
      2. getSnapshotBeforeUpdate()
      3. 실제 DOM에 변화 발생시
      4. componentDidUpdate
   2. 이 API를 통해서 DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있다.
      • getSnapshotBeforeUpdate 자세히 알아보기

10. componentDidUpdate(prevProps, prevState, snapshot)

    1. 컴포넌트에서 render()를 호출하고 난 다음에 발생. 이 시점에서는 this.props 와 this.state가 바뀌어 있고 파라미터를 통해 이전 값인 prevProps와 prevState를 조회할 수 있다.
    2. getSnapshotBeforeUpdate에서 반환한 snapshot 값은 세번째로 받아온다.

11. 컴포넌트에 에러 발생시

    componentDidCatch(error, info) {
        this.setState({
            error: true
        });
    }

    1. componentDidCatch를 실행되게 하여 render에서 에러를 띄워준다.