리액트 쿼리에서 useQuery를 어떻게 사용해야하나요
조회수 83회
리액트 쿼리에서는 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]; }, );공식 문서를 잘 보는 습관을 들여보세요!
댓글 입력