문제상황

⚡️ 카테고리 클릭 시 대표 이미지와 카테고리에 맞는 상품 리스트가 출력되어야 하는데, 백엔드와 통신 이후 이미지 값을 가져오지 못하고 componentDidMount / componentDidUpdate 에서 fetch를 진행할 경우, 계속해서 백엔드에 요청을 보내는 무한루프에 빠져버림 .... ㅠ

1. fetch() 이후 데이터를 해당 컴포넌트에서 사용하려할 때.

• componentDidMount에서 fetch()를 하고 state에 저장.

• 받아온 데이터에 console.log(카테고리 이미지 주소) 값을 쳐봤을 경우 해당 key에 대한 값을 찾을 수 없다는 에러가 발생하게 된다.

• 이유는 생명주기 때문!

• componentDidMount() 에서 state값을 저장하지만, 실행 순서에서 render -> componentDidMount -> render 순서로 진행되기 때문에, 콘솔을 찍느 순간에서 에러가 발생해 그 다음 순서로 가지 못하는 것이여따!!!

• 이때 조건부 렌더링을 통해 이 같은 상황을 해결할 수 있다.

{items[1] &&
	items[1].map((item, idx) => {
     return (
       <Item
       key={idx}
       id={item.id}
       img={item.thumbnail}
       price={item.price}
       gram={item.grams}
       title={item.name}
        />
     );
})}

2. 특정 조건에 맞게 fetch된 값을 뿌려주고싶다면??

• componentDidMount()에서 백엔드와 통신을 통해 데이터를 받아왔다.

• 이때, 카테고리를 클릭 하지 않았을 때 기본 이미지를 띄워주려면 어떻게 해야할까??

  componentDidMount() {
    fetch(
      `http://10.58.7.59:8000/list?category=${
        this.props.match.params.name || 'all'
      }`
    )
      .then(res => res.json())
      .then(data => this.setState({ items: data.results }));
  }

• api 주소 내에서 조건을 걸어주면 된다는 것을 왜 생각하지 못했을까 ㅠㅠㅠ

• this.props.match.params.name : 동적 라우팅을 사용한 부분인데 이 부분도 까묵기 전에 빨리 포스팅 해야겠다.

• 다음으로 한 번 마운트 될 때 데이터들을 받아왔다면, 카테고리 클릭 시 마다 다른 데이터들을 받아와야 한다.

• 이 때, 무턱대고 componentDidUpdate에 값을 fetch() 함수를 넣어버리면 계에에속해서 요청을 하며 무한루프에 빠져버린다. 적절한 조건을 걸어줘 이를 해결해야 한다.

• 나의 경우에는 이전 props를 비교해 동적 라우팅을 통해 받아온 값과 다를 경우 fetch를 진행하지 않는 조건을 걸어두었다.

  componentDidUpdate(prevProps) {
    if (this.props.match.params.name !== prevProps.match.params.name) {
      fetch(
        `http://10.58.7.59:8000/list?category=${
          this.props.match.params.name || 'all'
        }`
      )
        .then(res => res.json())
        .then(data => this.setState({ items: data.results }));
    }
  }

• componentDidUpdate(prevProps, prevState, snapshot)

• 이렇게 손쉽게 이전의 props, state, snapshot을 가져올 수 있다. 스냅샷에 관해서도 추후 공부해 봐야 겠다.

수 많은 삽질 끝에 에러를 해결하게 되었는데 , 무언가를 사용하려면 반드시 공식 문서를 읽어보자.. 꿀팁 모음소다 모음소오~

react 공식문서 참조