React: Component Lifecycle

Component Lifecycle

[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook

Component – React

생성(mounting) → 업데이트(updating) → 제거(unmounting)
리액트 컴포넌트는 라이프 사이클 메서드를 사용하며, 함수형 컴포넌트는 Hook을 사용한다.

• Mount

  컴포넌트가 생성될 때

  • constructor

    컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드이다.
    props, state에 접근이 가능하며 리액트 요소를 반환한다.

  • getDerivedStateFromProps

    props로부터 파생된 state를 가져온다. (props로 받아온 것을 state에 넣어주고 싶을때 사용한다.)

  • render

    컴포넌트를 랜더링한다.

  • componentDidMount

    컴포넌트 출력물이 DOM에 랜더링 된 후에 실행된다. 즉, 첫번째 랜더링을 마치면 호출된다.
    해당 메서드가 호출된다면 화면에 컴포넌트가 이미 나타난 상태이다.

• Updating

  컴포넌트가 업데이트 될때

  • getDerivedStateFromProps

    props나 state가 바뀌었을 때 호출된다.
    시간 흐름에 따라 변화되는 Props에 state가 의존하는 드문 경우를 위해 존재한다고 생각하면 된다.

  • shouldComponentUpdate

    컴포넌트가 리랜더링 할지 말지를 결정한다.

  • getSnapshotBeforeUpdate

    render가 되고 실제로 DOM에 적용되기 직전에 호출된다.
    DOM에 적용되기 직전의 상태를 기억했다가 DOM에 적용된 직후에 조절할 것이 있을 때 사용한다.

  • componentDidUpdate

    컴포넌트가 업데이트 되고 난 후에 발생한다.

• Unmount

  unmount는 컴포넌트가 화면에서 사라졌을 때를 말하는데 생명주기는 죽기 직전까지이므로, 화면에서 사라지기 직전을 의미한다.

  • componentWillUnmount

    컴포넌트가 화면에서 사라지기 직전에 호출된다.
    DOM에 등록했던 이벤트를 제거하거나 setTimeout을 사용했다면 clearTimeout을 사용하여 제거한다.

• ComponentDidCatch

  에러 경계(Error Boundaries) – React

  component의 에러를 캐치한다.
  해당 라이프사이클이 일어난 하위 컴포넌트에서 문제가 발생했을 때, 부모 컴포넌트에서 에러 화면이 아닌 다른 화면을 보여줄 수 있도록 한다.

  에러가 발생했다는 화면은 개발환경에서만 보여지고 실제 유저에게 보여지는 화면은 빈 화면이 나오게 된다. 이런 상황에서 혼란을 방지하기 위해서 에러가 발생했을 때, 빈 화면이 아닌 에러가 발생했다는 문구의 화면을 보여줄 수 있도록 하는 것이 해당 메서드이다.