React를 다루는 기술 08 - 컴포넌트의 라이프사이클메서드

모든 React 컴포넌트에는 라이프사이클이 존재하며 이 라이프사이클은 컴포넌트가 생성될 때 시작되어 페이지에서 사라질 때 끝난다.
이 라이프사이클을 확실히 파악하고 있으면 컴포넌트가 생성되고 업데이트되고 제거될 때 원하는 타이밍에 원하는 명령을 내릴 수 있으므로 매우 중요한 부분이다.
원하는 요소를 추가하거나 업데이트하고 또는 불필요한 렌더링이 일어나지 않도록 사전에 차단하는 등 다양하게 응용할 수 있다.

이러한 라이프사이클에 접근하기 위해서 컴포넌트의 라이프사이클메서드를 사용하는데 여기서 소개하는 메서드들은 클래스형 컴포넌트에서 사용하는 것으로
메서드형 컴포넌트에서는 사용할 수 없으며 대신 Hooks를 이용해서 접근하게 된다.

라이프사이클 메서드

라이프사이클 메서느는 총 9개로 will접두사가 붙은 메서드는 어떤 작업이 작동하기 전에 실행되며
did가 붙은 메서드는 어떤 작업이 작동한 후에 실행된다는 것을 의미한다.
라이프사이클은 마운트, 업데이트, 언마운트 이렇게 3가지로 구성되어 있다.

• 마운트(mount)
  DOM이 생성되고 브라우저상에 나타나는 것을 뜻하며 이 때 총 4개의 메서드가 호출된다.
  • constructor : 클래스 생성자 메서드
  • getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
  • render : 입력한 UI를 렌더링하는 메서드
  • componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출되는 메서드
• 업데이트
  업데이트는 총 4가지 경우에 진행된다.
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링되었을 때
  • this.forceUpdate로 강제로 렌더링 할 때

위와 같은 상황이 발생하여 업데이트 할 때 5개의 메서드를 호출하게 된다.

• getDerivedStateFromProps : 마운트 할 때 호출되었던 메서드로 업데이트시에도 호출되며 역할은 동일하다.
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야할지 말아야할지 결정하는 메서드로 true 혹은 false를 반드시 반환해야한다. 기본값을 true로 이 경우 리렌더링되고 false가 반환될 경우 렌더링 없이 여기서 업데이트는 종료된다.
  this.forceUpdate를 통해 강제로 업데이트를 발생시키면 이 단계를 거치지 않는다.
• render : 컴포넌트를 렌더링한다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 전에 호출되는 메서드로 변경된 컴포넌트와 현재 DOM을 서로 비교하고 결과값을 componentDidUpdate 메서드로 넘겨줄 수 있다.

• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드.

• 언마운트(unmount)
  마운트의 반대과정으로 페이지에서 컴포넌트가 제거되는 것을 뜻한다.
  • componentWillUnmount : 컴포넌트가 웹 브라우저 상에서 제거되기 전에 호출되는 메서드

라이프사이클 메서드 살펴보기

1. render메서드
   라이프사이클 메서드 중 유일하게 필수 메서드로 UI를 렌더링하는 역할을 한다.
   이 메서드 내에서 this.props와 this.state에 접근할 수 있으며 React 요소를 반환하고 이 때 null이나 false를 반환할 시 아무것도 보여주지 않게 된다.
   이 메서드 내에서는 이벤트 설정(onClick과 같은 이벤트 트리거 메서드)이 아닌 곳에서 setState를 사용하거나 DOM에 접근해서는 안되며 이러한 작업은 componentDidMount에서 처리해야한다.

2. constructor메서드
   클래스 컴포넌트의 생성자 메서드로 여기서 state의 초기상태를 정의할 수 있다.

3. getDerivedStateFromProps메서드
   React 16.3버전부터 추가된 메서드로 props로 받아온 값을 state에 동기화시키기 위한 목적으로 사용되며 마운트, 업데이트 시에 호출된다.

4. componentDidMount메서드
   컴포넌트가 첫 렌더링을 마친 후에 실행된다. 마운트의 최종단계로 이 함수를 끝으로 마운트가 완료된다.
   각종 라이브러리나 함수를 호출하거나 setTimeout, 네트워크 요청과 같은 비동기 함수의 작업을 하는 곳이다.

5. shouldComponentUpdate메서드
   props나 state를 변경했을 때 렌더링을 진행할지를 결정하는 함수로 여기서 false를 반환하면 props나 state값만 변경되며 이후의 업데이트 시 호출되는 메서드들은 호출되지 않게된다.
   이 메서드 안에서 현재 props와 state는 this.props, this.state로 접근 가능하며 새로 설정될 props와 state는 nextProps, nextState로 접근할 수 있다.
   이를 통해 상황에 맞게 렌더링이 이루어지게 하여 성능을 향상시킬 수 있다.

6. getSnapshotBeforeUpdate메서드
   React 16.3버전부터 추가된 메서드로 렌더링 된 결과물을 DOM에 적용하기 전에 호출된다.
   이 메서드에서 반환하는 값은 componentDidUpdate 함수에서 snapshot 파라미터로 전달받을 수 있으며 업데이트하기 직전에 값을 참조하기 위해 사용된다.
   현재 props, state와 이전의 props, state를 비교할 수 있다.

7. componentDidUpdate메서드
   리렌더링을 완료한 후에 실행하는 메서드로 업데이트가 끝난 후이므로 componentDidMount와 같이 DOM에 접근하여 작업을 진행할 수 있다.
   prevProps, prevState를 통해 이전 props와 state의 값을 가져올 수 있고 getSnapshotBeforeUpdate메서드에서 반환한 값이 있다면 snapshot 파라미터를 통해 받을 수도 있다.

8. componentWillUnmount메서드
   컴포넌트가 페이지에서 제거되기 전에 호출되는 메서드로 componentDidMount에서 등록한 이벤트, 타이머 등은 여기서 제거작업을 해야한다.

9. componentDidCatch메서드
   React 16버전에서 새롭게 추가된 메서드로 렌더링 도중에 에러가 발생했을 때 오류 UI를 보여줄 수 있도록 하는 메서드이다.
   렌더링 도중 에러가 발생할 경우 렌더링이 이루어지지 않았으므로 페이지에는 아무것도 표시되지 않게되는데 이 때 사용자에게 에러 페이지를 보여주기 위한 용도로 사용된다.
   주의점은 컴포넌트 자신에게 발생하는 에러를 잡아낼 수는 없고 자신의 this.props.children으로 전달되는 컴포넌트에서 발생한 에러만 잡아낼 수 있다.

출처자료

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=209354690 (리액트를 다루는 기술(개정판))