[리액트를 다루는 기술] LifeCycle Method

1. LifeCycle Method의 이해

• 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다
  컴포넌트의 수명: 페이지에 렌더링되기 전인 준비 과정에서 시작→ 페이지에 사라질 때 끝남
• 라이프사이클 컴포넌트는 클래스형 컴포넌트에서만 사용할 수 있다
  함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 작업을 처리할 수 있다

 

• 라이프사이클 메서드의 종류는 총 9가지가 있다
• Will 접두사가 붙은 메서드 - 어떤 작업을 작동하기 전에 실행되는 메서드
• Did 접두사가 붙은 메서드 - 어떤 작업을 작동한 후에 실행되는 메서드
• 이 메서드 들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다
• 라이프사이클은 총 3가지, Mount, Update, Unmount 카테고리로 나눈다
  • Mount
    - DOM이 생성되고 웹 브라우저상에 나타나는 것
    - 컴포넌트가 마운트될 때 호출하는 메서드는 하기와 같음
    
    1. 컴포넌트 만들기
    2. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
    3. getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
    4. render: UI를 렌더링하는 메서드
    5. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
  • Update
    - 컴포넌트는 하기의 4가지 경우에 업데이트 한다
    1. props가 바뀔 때
    2. state가 바뀔 때
    3. 부모 컴포넌트가 리렌더링될 때
    4. this.forceUpdate로 강제로 렌더링을 트리거할 때
    - 컴포넌트가 업데이트될 때 호출하는 메서드는 하기와 같음
    
    1. 업데이트를 발생시키는 요인
    2. getDerivedStateFromProps
       : 마운트 과정과 업데이트가 시작하기 전에 호출되는 메서드
         props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
    3. shouldComponentUpdate
       : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드
         Boolean 값을 반환함
         만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면, 이 과정을 생략하고 바로 render함수를 호출!
    4. 앞의 메서드에서 true 반환 시 render 호출, false 반환 시 여기서 작업 취소
    5. render: 컴포넌트를 리렌더링
    6. getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
    7. 웹 브라우저상의 실제 DOM 변화
    8. componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
  • Unmount
    - 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것
    - 언마운트될 때 호출하는 메서드는 하기와 같음
    1. 언마운트하기
    2. componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

 

2. LifeCycle Method 살펴보기

• render()
  - 컴포넌트의 모양새를 정의
  - 컴포넌트에서 가장 중요한 메서드
  - 라이프사이클 메서드 중 유일한 필수 메서드
  - this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환함
  - 아무것도 보여주고 싶지 않은 경우, null 또는 false를 반환하면 됨
• constructor()
  - 컴포넌트의 생성자 메서드
  - 컴포넌트를 만들 때 처음으로 실행됨
  - 초기 state를 정할 수 있음
• getDerivedStateFromProps()
  - 리액트 v16.3 이후에 새로 만들어진 라이프사이클 메서드
  - props로 받아 온 값을 state에 동기화시키는 용도로 사용
  - 컴포넌트가 마운트될 때, 업데이트될 때 호출됨

static getDerivedStateFromProps(nextProps, preveState) {
  if(nextProps.value !== preveState.value){  // 조건에 따라 특정 값 동기화
    return { value: nextProps.value };
  }
  return null;  // state를 변경할 필요가 없다면 null을 반환
}

• componentDidMount()
• shouldComponentUpdata()
• getSnapshotBeforeUpdate()
• componentDidUpdate()
• componentWillUnmount()
• componentDidCatch()

 

3. LifeCycle Method 사용하기

• 에러 잡아내기
  • render 함수에서의 에러는 주로 존재하지 않는 함수를 사용하려고 하거나, 존재하지 않는 객체의 값을 조회하려고 할 때 발생!
  • 에러가 발생한 경우, 에러 발생 안내 화면을 따로 지정하지 않으면 흰 화면만 보여주기 때문에, 에러를 잡아주는 컴포넌트가 필요!

//ErrorBoundary.js

import { Component } from 'react';

class ErrorBoundary extends Component {
  state = {
    error: false
  };
  
  componentDidCatch(error, info){
    this.setState({
      error: true
    });
    console.log({ error, info });
  }
  
  render(){
    if(this.state.error) return <div>에러가 발생했습니다!</div>;
    return this.props.children;
  }
}


export default ErrorBoundary;

• 에러가 발생하면 componentDiscatch 메서드가 호출되며, 이 메서드는 this.state.error 값을 true로 업데이트 해줌
• this.state.error 값이 true 이면, render 함수가 에러가 발생했음을 알려주는 문구를 보여줌

// App.js

import { Component } from 'react';
import LifeCyclSample from './LifeCycleSample';
import ErrorBoundary from './ErrorBoundary';

// 랜덤 색상 생성
function getRandomColor(){
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

class App extends Component {
  state = {
    color: '#000000'
  };
  
  handleClick = () => {
    this.setState({
      color: getRandomColor()
    });
  };
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>랜덤 색상</button>
        <ErrorBoundary>
          <LifeCycleSample color={this.state.color} />
        </ErrorBoundary>
      </div>
    );
  }
}


export default App;

 

---

참고자료

• 리액트를 다루는 기술 [김민준 저]