1차 프로젝트를 진행하면서 fetch 를 사용해야하는 일이 많아졌다. 상품 리스트 페이지를 맡게 됐는데 라인프렌즈의 경우에 필터 관련된 기능들이 여러가지가 있어서 이 때 새 요청을 보내 다른 데이터를 받아오기 위해 update 와 관련된 라이프 사이클 메소드가 필요했다.

componentDidUpdate

기본 사용법

componentDidUpdate 의 경우에는 componentDidMount 의 경우와는 다르게 state 나 부모 컴포넌트로부터 받은 props 에 변동사항이 있는 경우에 사용할 수 있는 요소이다.

사용법은 아래와 같다.

componentDidUpdate = (prevProps, prevState) => {
    fetch('data/ProductData.json')
      .then(result => result.json())
      .then(list => this.setState({ list, totalProducts: list.length }));
  };

만약 위와 같은 상태로 사용을 하게 되면 어마어마한 일이 발생하게 된다. fetch 안에서 setState() 를 하고 있기 때문에 state 에 계속 변경이 생기게 되고 무수한 요청을 보내게 된다. 그렇기 때문에 이를 막기 위해서 componentDidUpdate 를 사용하는 경우에는 조건을 제시해줘야 한다.

조건

componentDidUpdate = (prevProps, prevState) => {
    if (this.state.filter !== prevState.filter) {
      this.getData();
    }
  };

위의 예시를 보면 현재 state 에 있는 filter 의 값과 이전 state 의 filter 의 값이 같지 않은 경우에만 componentDidUpdate가 발생할 수 있도록 했다. 이렇게 작성을 하면 원하는 조건에서만 데이터를 요청할 수 있다.

라이프 사이클의 경우에 다룰 내용이 많이 있기 때문에, 나중에 한 번 제대로 정리를 해볼 생각이다. 우리가 원하는 시점에서 원하는 동작을 할 수 있는 라이프 사이클 메소드에 대해서 차근 차근 친해져보자.