사이드 프로젝트 React-query 도입 계기 및 사용 후기

아이템 추가,업데이트 모달

제 사이드프로젝트에서 아이템 추가를 할때 모달을 통해 아이템을 추가하게 됩니다.

 

아이템을 추가한 후에 아이템이 자동으로 화면에서 최신화업데이트를 하려면 React-query를 쓰기 전까진 데이터를 불러오는 함수를 사용해서 최신화를 시켜주었습니다.

아이템을 추가하는 ItemEditorModal 컴포넌트 안에있는 아이템추가코드

post 요청을한후 요청이 잘됐다면 then 을 통해 아이템추가되었다는 알람토스트를 띄우고, getItem 함수 즉 데이터를 불러오는 함수를 사용하여 추가된 데이터를 화면단에서 바로바로 업데이트할수있게 해주었습니다.

ItemEditorModal 은 InventoryPage 에 종속되어있었고 InventoryPage 에서 setItems 를 ItemEditorModal 로 props 내려 주어 사용하였습니다.

 

문제는 여기서 발생하였습니다.

 

모달을 확장성을 고려하여 리팩토링을 하고싶었기때문에 index.tsx 에 GlobalModals 라는 컴포넌트로 모달을 전역으로 관리하게 되었습니다.

 

import { Provider } from "react-redux";

import ReactDOM from "react-dom/client";

import "./index.css";

import React from "react";

import App from "./App";

import store from "./store/store";

import GlobalModals from "./components/modals/GlobalModals";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(

document.getElementById("root") as HTMLElement

);

root.render(

<Provider store={store}>

<GlobalModals />

<App />

</Provider>

);

이렇게 된이상 InventoryPage 에는 ItemEditorModal 컴포넌트가 필요없게 되었고  아이템 추가,업데이트 하는 모달인 ItemEditorModal에게 setItems 로 props를 내려주지 못하게되어서 새로운 방법을 찾아야했는데 서버데이터와 연동이 강력한 React-query 를 도입하게 되었습니다.

 

React-query 는 데이터를 fetching 한 후에 데이터를 캐싱 하게 되며, 가져온 데이터가 stale 즉 오래되었다고 판단되면 데이터를 refetching 하게 됩니다. 또한 stale 의 기준은 사용자가 커스텀 하여 조절 할 수 있습니다. 

저는 여기에서 React-query 를 사용하면 데이터를 추가한후 ui를 아주 편하게 최신화 할 수 있다고 생각했습니다.

아이템 추가,업데이트 해주는 React-query 코드

여기서 queryClient.invaildateQueries 가 궁금하신분들도 있으실것같아 설명 해드리겠습니다.

invaildateQueries 는 맵핑된 쿼리를 유효하지않게만들어 refetching 을 해주는 도구입니다.

InvertoryPage 에서는 useQuery를 사용하여 items 라는 스트링값을 queyrKey로 맵핑해주었습니다.

따라서 아이템 추가 성공후 맵핑된 쿼리를 유효하지 않게 만들어준다면 refetching 되어 새로운 데이터로 ui가 최신화 될 것 입니다.

 

React-query 코드 도입 전 vs 후

React-query를 사용해본결과 대단히 만족하였습니다. 

 

결과적으로 코드를 많이 줄일수 있었으며,에러핸들링도 직관적으로 아주 쉽게 가능하였습니다.

 

아직 React-query 에 수많으 기능들을 써보진 않았지만 CURD 만으로도 아주 강력하다는걸 많이 느끼게 되었으며 상당한 매력을 느끼게되었습니다.

 

앞으로 사이드프로젝트에 기능들을 추가하며 React-query 를 공부해보고 계속 리팩토링 해나갈 예정이며 해당 기술정리도 블로그에 기초부터 정리해나갈 예정입니다.

 

코드가 궁금하신분은 https://github.com/taejinii/MakeMoney 여기서 확인가능합니다.

 

읽어주셔서 감사합니다.