POB_TIL 0519

이지훈·2022년 5월 19일
0

프리온보딩_TIL

목록 보기
13/22

두번째 기업과제

새로운 기업과제가 나왔다. 이번엔 자동완성에 대한 것인데 react-query, redux-toolkit을 새롭게 적용하여 상태관리와 비동기처리시 캐싱 등 다양한 시도를 했다.

useQueries

하나의 검색어를 각 글자마다 모두 검색결과를 가지고 올 수 없을까 생각하다가 react-query에서 지원해주는 기능을 찾게 됐다. useQuery를 배열로 사용하는것같은 기능으로 사용법도 간단히 useQuery에 사용되는 key, queryFn, 기타 설정들을 그대로 배열로 넣어주면 된다.

 const results = useQueries([
   { queryKey: ['post', 1], queryFn: fetchPost },
   { queryKey: ['post', 2], queryFn: fetchPost },
 ])
 

결과값 또한 각 쿼리의 결과가 배열로 오게 된다.
검색어 입력값을 split으로 각 글자별로 나눈 후 useQueries를 사용하면 전체 글자에대한 각각의 검색결과를 알 수 있을 것 같다.

문제점

검색 기능에 react-query를 사용하고 redux-toolkit을 통해 결과값을 관리하려고 했는데 결과를 출력하는 곳에서 계속 문제가 발생했다. 에러메시지는 분명 배열로 값이 저장되어있을터인 state의 map을 찾을 수 없다는 메시지였다. 그래서 저장하는부분이 잘못된것인지, null이나 undefined체크를 해보기도 하고 결과값을 콘솔로 모두 찍어보기도 했다.

  • 원인: api의 응답 반환값 자체가 배열일 때도 있고 아닐 때도 있다.

알고보니 검색 결과가 없거나 하나만 있을 때는 배열이 아니라 빈 문자열이나 객체로 반환을 해주는것이었다. 이렇게 일관성이 없다니!
하지만 당연히 배열일거라고 생각한 내 잘못이다. 그래서 배열을 확인하고 아닐 때는 배열로 감싸주는 처리를 해주니 정상적으로 동작하게 되었다.

api가 완벽할거라고 생각하지 말자!

profile
안녕하세요! 대학교 졸업한 이지훈입니다.

0개의 댓글