데이터 한번에 불러오기, useQueries

가연·2023년 8월 12일

전대위키 리팩토링

목록 보기

2/8

관리자 페이지 중 기본 정보 수정 요청 페이지를 만들기 위해서는 수정 전 정보와 수정 후 정보를 불러와야 한다.

const {
    data:basicData, 
    isLoading:basicLoading,
    } = useQuery(['basicrequest',docsId],()=>{
        return docsRequest(docsId)})  

     
const {
  data:modiData,
  isLoading:modiLoading,
  } = useQuery(['modirequest',docsRequestId],()=>{
              return editDocsRequest(docsRequestId)})

그런데 평소 쓰는것과 같이 여러 useQuery를 썼더니 해당 페이지를 두번 이상 들어가야 정보가 불러와지는 에러가 발생했다.
에러를 해결하기 위해 정보를 찾던 중, 한번에 여러개의 api 요청이 필요한 경우 useQueries 라는 훅을 사용한다는 것을 알게 되었다.

useQueries 사용하기

const results = useQueries({
  queries: [
    { queryKey: ['basicrequest',docsId], queryFn:async ()=>{return await docsRequest(docsId)}},
    { queryKey: ['modirequest',docsRequestId], queryFn:async ()=>{return await editDocsRequest(docsRequestId)}}
  ]
})

한번에 두개 이상의 api 요청을 보낼때, 한번에 데이터를 받고 싶을때 useQueries를 사용하면 된다.
useQueries를 사용하면 데이터가 배열로 저장되는데, 예를들어 docsRequest로 요청받은 정보는 result[0]에 , editDocsRequest로 요청받은 정보는 result[1]에 담긴다.

이 결과값을
result[0].data
result[1].isLoading 등으로 사용하면 된다.

중간에 생긴 에러

if (results[0].status==='success'){
  setData(results[0]?.data?.data?.response);
  setModiData(results[1]?.data?.data?.response);
}

이것 처럼 useState에 상태를 저장하려고 했더니

react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

라는 에러가 떠서 해결법을 찾아봤다. 해결법은 useEffect({},[]) 를 사용해서 첫 렌더링 될때만 실행되게 하라고 했지만, 첫 렌더링 될 때 데이터가 안 불러와져있는 상태라서 실행이 안됐다. 그래서
useEffect 의 배열에 results를 넣었더니

이렇게 무한 re-rendering이 됐다.
그래서 useState를 사용하지 않으려고 했지만 geocoder 로 주소 변환을 하기 위해서는

const callback1 = function (result, status) {
      if (status === kakao.maps.services.Status.OK) {
        if (result[0].address_name) {
          setAddress(result[0].address_name);
        } else {
          setAddress(result[0].address.address_name);

        }
      }
    };

const LonLaToAddress1 = () => {
      geocoder.coord2Address(coord.getLng(), coord.getLat(), callback1);
    };