React Component(컴포넌트)의 생명 주기 요약 정리!

안녕하세요.

 

React하면 사용하는 컴포넌트.

class TestComponent extends React.Component {
	render() {
    	return (
        	<div>Hello React!</div>
        )
    }
}

와 같이, 컴포넌트를 만들기 위해 React.Component 를 extends 해서 사용하는데요.

 

 

이 React.Component 에도 안드로이드의 Activity, iOS의 AppDelegate 처럼 생명 주기(Life Cycle) 가 존재합니다.

 

이 생명 주기에 대해 알아보겠습니다.

 

 

 

 

 

컴포넌트의 전체 생명 주기

---

 

 

컴포넌트가 생성되고, 업데이트(새롭게 랜더링) 되며 제거되는 전 단계를 요약한 사진입니다.

(생성 -> 업데이트 -> 제거)

 

이렇게 보게 되면 헷갈릴 수 있으니까, 하나씩 정리해보겠습니다.

 

그 전에 먼저, Mount(마운트) 에 대한 개념을 짚어보겠습니다.

 

컴포넌트가 생성될 때

---

Mount(마운트)

  -  DOM 객체를 생성하고, 이를 웹 브라우저에 출력하는 것.

 

  -  즉, 기본 DOM에 컴포넌트(새롭게 추가한 코드 또는 수정한 코드) 를 렌더링해 새로운 DOM 객체를 만들고, 이를 웹 브라우저에 출력합니다.

 

 

 *** 컴포넌트가 생성되서 마운트를 위한 함수 componentDidMount() 가 호출되기까지의 과정

 

    1)  constructor

        -  컴포넌트 클래스의 생성자. 컴포넌트가 만들어질 때 마다 호출됩니다.

        -  주로 this.state의 초기값 설정(setState는 사용 불가능합니다. 그냥 초기화입니다.), 이벤트 처리 함수 바인딩 시 사용됩니다.

 

    2)  getDerivedStateFromProps

        -  props와 state의 동기화(값 설정) 를 위하여 호출합니다. v16.3 이후 만들어졌습니다.

        -  Component의 Instance에 접근할 수 없습니다. 

        -  부모 컴포넌트가 다시 렌더링할 때 호출됩니다.  

 

    3)  render

        -  해당 함수 내 리턴 코드를 통해 DOM의 기능과 모양 정보가 담긴 React 요소를 리턴합니다.

        -  컴포넌트의 state를 변경하면 안됩니다. 

 

    4)  componentDidMount

        -  컴포넌트 생성 ~ 렌더링(render 종료) 까지 진행된 후 호출되는 함수입니다.

 

 

 

그럼, 위 4개의 함수를 호출하는 코드를 작성해서 테스트해보겠습니다.

 

 

 

테스트 코드

constructor(props) {
  super(props);
  console.log("Constructor 호출!");
}

static getDerivedStateFromProps(nexProps, prevState) {
  console.log("getDerivedStateFromProps 호출!");
  return null;
}

componentDidMount() {
	console.log("componentDidMount 호출!");
}

render() {
  console.log("render 호출!")
  return (
  	<div>안녕하십니까. Render 호출입니다!</div>
  )
}

 

Console 출력 결과

 

console.log 결과

 

  *** 테스트 코드 위에서 작성한거라 두 개씩 나오게 되었습니다.. 이해해주시면 감사하겠습니다..

 

 

컴포넌트가 업데이트 될 때

---

  -  props 및 state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate 실행을 통해 강제로 리렌더링하는 경우 업데이트됩니다.

 

 

*** 업데이트 시 함수 호출 과정

 

  1)  getDerivedStateFromProps

        -  마운트(Mount) 과정에서도 호출된 함수입니다.

 

  2)  shouldComponentUpdate

        -  컴포넌트의 리렌더링 여부를 결정하는 함수입니다.

        -  true : 다음 단계의 함수들을 호출하여 업데이트에 따른 리렌더링을 진행합니다.

        -  false : 리렌더링을 하지 않게 되며, 다음 단계의 함수들을 실행하지 않고 끝냅니다.

        -  forceUpdate 함수 호출 시 실행되지 않습니다.

 

  3)  render

        -  Mount와 비슷하게, View(웹 브라우저 화면) 의 리렌더링(수정)을 위해 호출됩니다.

 

  4)  getSnapshotBeforeUpdate

        -  변경된 요소에 대하여 DOM 객체에 반영하기 전에 호출되는 함수입니다.

        -  v16 이후 만들어졌습니다.

        -  이 함수에서 리턴하는 값을 ComponentDidUpdate의 3번 째 인자로 사용할 수 있습니다.

 

  5)  ComponentDidUpdate

        -  컴포넌트 업데이트 작업(리렌더링) 이후에 호출되는 함수입니다. 

 

 

테스트 코드

constructor(props) {
  super(props);
  console.log("Constructor 호출!");
}

ShouldComponentUpdate(nextprops, nextState) {
  console.log("sholudComponetUpdate 호출!")
  return true; // 리렌더링 계속 진행!
}

getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log("getSnapshotBeforeUpdate 호출!")
  return null;
}

componentDidUpdate() {
	console.log("componentDidUpdate 호출!");
}

render() {
  console.log("render 호출!")
  return (
  	<div>안녕하십니까. Render 호출입니다!</div>
  )
}

 

 

컴포넌트가 제거될 때

---

  -  컴포넌트가 DOM에서 제거될 때(Unmount - 언마운트) 진행합니다.

 

  -  ComponentWillUnmount() 함수 하나만 호출되며, 이 함수는 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다.

  

  -  타이머 제거 등 을 위해 사용됩니다.

 

 

오타, 잘못된 정보가 있으면 댓글로 말씀 부탁드립니다.

 

감사합니다.