React.js - 클래스형 컴포넌트의 생명주기(Life Cycle)

 

React는 함수형과 클래스형 컴포넌트의 생명주기 형태가 다르다.

 

나같은 경우는 처음 리액트를 독학할 때는 클래스형 기준으로 공부하고 이후 프로젝트 개발할 때는 함수형으로 주로 쓰다 보니 개념이 뒤죽박죽이 되었다.

 

블로그에 정리하면서 복습해 보자.

 

(2021-11-01에 부족한 부분을 업데이트했습니다.)

---

 

마운트

1. construnctor()

: 컴포넌트가 처음 렌더링될 때 호출(생성자 메소드)

=> 단 한 번만 실행

constructor(props) {
  super(props);
}

 

2. getDerivedStateFromProps()

: props로 받아온 값을 통해 state를 갱신하기 위한 메소드

  render() 직전에 실행되며, 여러 번 실행될 수 있음

  return된 값이 초기 state의 초기값으로 설정됨(null 반환 시 아무 일도 일어나지 않음)

  메소드 앞에 async 키워드를 붙여서 사용해야 함

=> 성능 저하 우려가 있어 거의 사용하지 않음

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.color !== prevState.color) {
    return { color: nextProps.color };
  }
  return null;
}

 

3. componentWillMount()

: 컴포넌트가 렌더링되기 전에 호출되는 메소드

=> deprecated됨

 

4. render()

: 컴포넌트 렌더링 메소드

 

5. componentDidMount()

: 처음 렌더링이 완료된 후 호출되는 메소드

=> DOM을 사용해야 하는 외부 라이브러리 연동 혹은 컴포넌트에서 필요로 하는 데이터를 요청할 때 주로 사용

 

업데이트

1. getDerivedStateFromProps()

: 컴포넌트의 props나 state가 바뀌었을 때도 실행됨

 

2. shouldComponentUpdate()

: 컴포넌트 리렌더링 발생 전에 호출되는 렌더링 결정 메소드(리렌더링 할지 말지?)

=> true 반환 시 작업 계속, false 반환 시 중지

shouldComponentUpdate(nextProps, nextState) {
  return nextState.number % 10 !== 4;  // true시 리렌더링, false시 X
}

 

3. render()

: 컴포넌트 렌더링 메소드

 

4. getSnapshotBeforeUpdate()

: 컴포넌트 업데이트를 DOM에 반영(리렌더링)하기 바로 직전에 호출되는 메소드

  return되는 값은 componentDidUpdate()로 반환됨

getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.color !== this.props.color) {
    return this.myRef.style.color;
  }
  return null;
}

 

5. componentDidUpdate()

: 컴포넌트 업데이트(re-render) 작업 완료 후 실행되는 메소드

=>  getSnapshotBeforeUpdate에서 return한 값을 3번째 파라미터인 snapshot으로 전달받아 사용할 수 있음

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot) {
    console.log("업데이트 되기 직전 색상: ", snapshot);
  }
}

 

마운트 해제(언마운트)

1. componentWillUnmount()

: 컴포넌트가 DOM에서 제거될 때 호출되는 메소드

  clearTimeout 혹은 clearInterval 등이 실행되는 메소드

 

오류 처리

1. getDerivedStateFromError()

: 자손 컴포넌트에서 에러 발생 시 호출되는 메소드

=> 렌더 단계에서 수행, 오류 발생시 UI가 다르게 나타나도록 기능 구현 시 사용

 

2. componentDidCatch()

: 자손 컴포넌트에서 에러 발생 시 호출되는 메소드

=> 렌더링 도중(커밋 단계)에서 수행, 일반적인 오류 탐지에 주로 사용됨