1. 소개
react-query는 서버와 API 통신을 통해 데이터를 가져오거나 수정, 삭제하는 등의 CRUD 구현을 위한 라이브러리입니다.
리액트 쿼리의 대표적인 장점은 데이터 캐싱에 있습니다.
유저가 데이터 로딩이 필요한 페이지에 접속 시 1회 데이터를 캐시 (브라우저 메모리)에 저장하고,
페이지 이동후 다시 이전 페이지로 돌아온다면 데이터를 캐시로부터 꺼내 쓰기 때문에 로딩이 필요하지 않습니다.
SPA 방식의 리액트에서 높은 속도의 어플리케이션을 구현할 수 있습니다.
2. 사용
이전에 Program.jsx에서 supabase API를 통해 PROGRAM 테이블의 데이터를 받아왔던 부분을 react-query를 사용해 고쳐보겠습니다.
설정
먼저 QueryClient를 사용해야합니다.
main.jsx에서 QueryClient와 QueryProvider를 import 하고,
queryClient 변수를 생성 후
App 컴포넌트를 client를 사용한 QueryProvider로 감싸줍니다.
import { QueryClient, QueryClientProvider } from "react-query";
...
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")).render(
<QueryClientProvider client={queryClient}>
<GlobalStyles />
<RecoilRoot>
<App />
</RecoilRoot>
</QueryClientProvider>
);코드 수정
이제 Program.jsx에서 useQuery 훅을 사용합니다.
const { isLoading: programLoading, data: programData } = useQuery(
["programs"],
getPrograms
);useQuery훅은 배열 형태의 key와 fetcher 함수를 인자로 받습니다.
데이터는 캐시에 unique한 key로 구분되어 저장되어 key를 이용해 필요한 데이터에 접근할 수 있습니다.
fetcher 함수는 Promise를 리턴하는 함수로, fetch나 axios를 이용해 API 주소에 http 요청을 하고, 이로부터 json 형태의 response를 얻습니다.
미리 로컬 서버에 작성한 API에 fetch로 GET 요청을 보내 보겠습니다.
function getPrograms() {
return fetch("http://localhost:4000/api/program").then((response) =>
response.json()
);
}그리고 jsx 부분도 알맞게 고쳐줄게요.
<ProgramContainer>
{programLoading ? (
"Loading Programs..."
) : (
<ul>
{programData.data.map((program) => (
<li>{program.program_name}</li>
))}
</ul>
)}
</ProgramContainer>이제 서버가 켜져있는 상태로 /program에 접속하면
캐싱도 잘 되네요.
3. 활용
이제 #6의 react-hook-form과 #7의 react-query를 활용해 아래 filter를 구현해야 하는데...
대략적인 단계는 다음과 같습니다.
- filter 제출 시 form 데이터 받기
- jsx 안에서 javascript filter 함수 써서 조건의 데이터만 표시
더 나은 방법이 있을수도 있고🤔
연구가 필요하겠네요!
