리액트 쿼리에서 useQuery를 어떻게 사용해야하나요

조회수 281회

리액트 쿼리에서는 useQuery로 API를 호출하여 얻은 data를 map으로 돌려서 화면에 뿌려주는 것으로 알고 있습니다

export const getList = async () => {
  const { data } = await api.get("/~/~/~/list");
  return data;
};
export const getNewList = async () => {
  const { data } = await api.get("/~/~/~/new-list");
  return data;
};

만약에 가져와야할 것이 이렇게 두 개라면 useQuery를 어떤 식으로 사용해야하나요?

1 답변

  • useQuery는 api 하나만 가져오는것이 아닙니다.
    비동기 함수를 실행한 결과값을 훅으로 가져오는 기능이라고 생각하시면 편합니다.

    const {
        data, // 아래 코드에 의해 array로 리턴됩니다. 실패한 경우에는 undefined가 됩니다.
    } = useQuery(
        ['getList', 'getNewList'],
        async () => {
            // 이 함수 내부의 로직은 원하는 대로 작성하면 됩니다.
            const list = await getList();
            const newList = await getNewList();
            // 리턴 방식도 원하는 대로 하면 됩니다.
            return [list, newList];
        },
    );
    

    공식 문서를 잘 보는 습관을 들여보세요!

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)