React에서 componentDidUpdate를 사용하는 방법

이전 상태와 현재 상태의 비교를 기반으로 구성 요소 업데이트

구성 요소가 응용 프로그램에 마운트되고 렌더링된 직후에 클래스 구성 요소에서 componentDidMount() 메서드가 호출되는 방식을 확인했습니다.
componentDidMount()는 구성 요소 수명의 특정 지점에서 React 시스템에 의해 자동으로 호출되는 메서드인 React 구성 요소 수명 주기 메서드의 일부입니다.
또 다른 그러한 방법은 componentDidUpdate() 입니다.
componentDidUpdate()는 componentDidMount() 이후에 호출되며 상태가 변경될 때 일부 작업을 수행하는 데 유용할 수 있습니다.componentDidUpdate()는 이전 props와 이전 상태를 처음 두 인수로 사용합니다.
메서드 내에서 조건이 충족되는지 확인하고 그에 따라 작업을 수행할 수 있습니다.

예를 들어 아래 코드에서 이전 상태와 현재 상태가 다른지 확인합니다. 그렇다면 콘솔 로그 문이 실행됩니다.

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}

언제 componentDidUpdate() 를 사용합니까?

사용 시기componentDidUpdate()의 예는 이전 상태와 현재 상태가 변경된 조건에서 외부 API를 호출해야 하는 경우입니다.

API에 대한 호출은 변경되는 상태에 대한 조건부입니다. 상태 변경이 없으면 API가 호출되지 않습니다.

앞에서 언급한 것처럼 무한 루프를 방지하려면 API 호출이 조건문 내부에 있어야 합니다.