[React] 라이프사이클 과정

y1andyu·2020년 9월 7일
1

오늘은 리액트의 라이프 사이클 과정에 대해서 알아보겠습니다. 라이프사이클은 마운트, 업데이트, 언마운트 총 세 가지 카테고리로 나눌 수 있습니다.

Mount


DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 합니다. 그럼 마운트가 될 때 호출되는 메서드들을 알아보죠. 위의 그림을 참고하세요.

그림을 살펴봤을 때 호출되는 함수의 순서는 아래와 같습니다.

  1. constructor
  2. getDerivedStateFromProps
  3. render
  4. componentDidMount

하나씩 뜯어보겠습니다.

constructor

컴포넌트가 새로 만들어질 때마다 호출되는 클래스 생성자 메서드입니다. 자바스크립트의 클래스와 똑같죠. 여기서 각 컴포넌트들의 state를 정의할 수 있습니다.

static getDerivedStateFromProps

부모 컴포넌트로부터 받은 props를 state와 동기화하는 함수입니다. state가 props에 의존적이거나, props로 state값을 결정하거나 할 때 말이죠. 컴포넌트가 렌더링 될 때마다 한 번씩은 실행되기 때문에 주의해야 합니다.

render

준비한 UI를 렌더링하는 메서드입니다.

componentDidMount

컴포넌트가 웹 브라우저에 나타난 뒤 호출하는 메서드입니다.

Update


컴포넌트가 업데이트될 경우를 알아보죠

  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링될 때
  • this.forceUpdate로 강제로 렌더링을 발생시킬 때

업데이트 과정에서 호출되는 메서드들을 알아보죠.

  1. getDerivedStateFromProps
  2. shouldComponentUpdate
  3. render
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate

getDerivedStateFromProps

마운트에서도 나왔었죠. 마찬가지로 업데이트가 시작되기 전에 호출되서 props 변화에 따른 state를 바꾸고 싶을 때 사용합니다.

shouldComponentUpdate

컴포넌트의 리렌더링을 할지 말지 결정하는 메서드입니다. true 혹은 false를 반환하죠. true를 반환하면 render 메소드를 호출하고, false를 반환하면 작업을 중단합니다. 컴포넌트가 리렌더링되지 않도록 막는거죠. 한 가지 예외로, 어떤 함수에서 this.forceUpdate()가 호출되면 이 과정을 생략하고 바로 render함수를 호출해 UI를 리렌더링합니다.

render

컴포넌트를 리렌더링합니다.

getSnapshotBeforeUpdate

컴포넌트가 업데이트 되어 DOM에 반영하기 바로 전에 호출되는 메서드입니다.

componentDidUpdate

컴포넌트의 업데이트가 끝난 후 호출하는 메서드입니다.

Unmount


컴포넌트를 DOM에서 제거하는 과정을 언마운트라고 합니다. 라이프 사이클 메서드도 하나입니다.

componentWillUnmount

컴포넌트가 웹 브라우저에서 사라지기전에 호출하는 메서드입니다.

Reference


https://www.paduckk-dev.com/development/React%20LifeCycle/

리액트를 다루는 기술 - velopert

profile
스타트업에서 일하는 프런트엔드 주니어 개발자입니다.

0개의 댓글