WIL - map undefined/null cases

이번주 프로젝트를 진행하면서 데이터를 불러오는 순서, 즉 비동기 관련한 오류들을 여러번 확인할 수 있었다. 

useQuery 훅이 제공하는 isLoaing, isError, error 등의 상태를 활용하는 법

aync/await의 잘못된 사용의 예를 다시한번 정리하면서 WIL을 작성해본다!

---

Problems 1

검색페이지에서 검색값 확인 후 새로고침 시, "Cannot read properties of undefined (reading 'map') 오류

Solve

검색한 후에 새로고침 하면서 데이터를 다시 불러오는 과정에서 생긴 문제였다. 데이터가 로드되지않은 상태에서 map이 실행되면서 map을 읽을 수 없게 된 것. useQuery 훅을 사용해서 데이터를 불러오고 있었으므로, 여기서 데이터 로딩상태를 isLoading으로 확인해주는 프로세스가 필요했다. 

https://hellokeitha.tistory.com/101

TIL - map, 아직 데이터 안왔어 "isLoading"의 역할

 

---

Problems 2

다시한번 "Cannot read properties of null (reading 'map')" 오류

메인페이지에서 data를 불러올 때 async await로 불러오고 있었는데 이말은 즉, 해당 비동기 작업이 완료되기 전에 다음 코드를 먼저 실행할수 있게 한다. 이러한 처리 순서에 의해 map 함수 사용 시 데이터를 가져오기 전에 먼저 실행된 map의 값이 null 혹은 undefined로 반환 될 수 있다.

Solve

async await를 제거한 후 다시 확인해보니 오류없이 잘 동작하는 걸 확인할 수 있었다.

https://hellokeitha.tistory.com/99