⚡️ 카테고리 클릭 시 대표 이미지와 카테고리에 맞는 상품 리스트가 출력되어야 하는데, 백엔드와 통신 이후 이미지 값을 가져오지 못하고 componentDidMount / componentDidUpdate 에서 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}
/>
);
})}
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
을 가져올 수 있다. 스냅샷에 관해서도 추후 공부해 봐야 겠다.
수 많은 삽질 끝에 에러를 해결하게 되었는데 , 무언가를 사용하려면 반드시 공식 문서를 읽어보자.. 꿀팁 모음소다 모음소오~