내가 레퍼런스가 되자 내가 레퍼런스가 되자

React Query를 도입하여 사용 중에 Query Key에 대한 관리의 필요성을 느꼈습니다. 팀 내부에선 Query Key를 Array 형태로 사용하기로 컨벤션이 잡혀 있었는데 사용자가 Array 내부의 key 요소를 잘 못 입력을 하거나 order가 잘 못 되는 경우가 발생할 수 있었기 때문입니다. 그리고 아래의 예시처럼 특정 ID를 key의 요소로 사용하거나 key의 요소가 많을 경우 그러한 실수는 더 많이 발생할 수 있습니다. ... export const useGetUserDetail = (userID: string) => { const context = useQuery( // 지정할 key의 요소가 많은 케이스 ['user', 'detail', 'info', userID], async () ..

Store에서 서버 상태 관리(비동기 처리 상태 관리) 분리를 위해 React Query를 도입하게 되었습니다. 이전 포스팅을 통해 여러 서버 상태 관리 라이브러리를 비교했고 팀원들의 의견에 따라 React Query를 선택하게 되었습니다. React Query를 현재 프로젝트에 도입하여 사용한 내용을 정리해 보았습니다. 기본 셋업 React Query를 설치합니다. (React v16.8 이상 호환됩니다.) npm i react-query # or yarn add react-query React Query Provider를 main에 선언합니다. // main.tsx ... import { QueryClient, QueryClientProvider } from '@tanstack/react-query'..

Store에서 전역 상태 관리뿐만 아니라 서버 상태 관리(비동기 처리 상태 관리)에 대한 처리도 같이 하다 보니 Store가 너무 비대해지는 현상이 발생했습니다. 이에 따라 전역 상태 관리와 서버 상태 관리를 분리시켜 Store의 경량화를 위해 서버 상태 관리 라이브러리를 찾아보게 되었습니다. 관련 라이브러리 레퍼런스가 가장 많은 React Query와 SWR 그리고 현재 RTK(Redux Toolkit)를 사용 중이기 때문에 RTK Query 이렇게 도입을 위해 세 라이브러리를 비교해 보았습니다. React Query https://react-query.tanstack.com/overview SWR https://swr.vercel.app/ko RTK Query https://redux-toolkit...