FE/React & TS

[react-Query] useMutation 사용해서 데이터 변경과 예외처리 하기

useMutation카테고리 생성 기능을 구현하던 중, 카테고리 데이터를 서버로 POST 해줘야했다.서버 데이터를 변경하는 요청은 (POST, DELETE 등) 대부분 특정 이벤트가 발생할 때 실행되어야 한다.이는 useMutation 의 mutate 를 사용하여 구현할 수 있다.카테고리의 name을 post하는 비동기 함수를 작성하고,const categoryRequest = async (name: string) => { const requestData = { name: name, }; const response = await axiosInstance.post(`${BASE_ENDPOINTS.CATEGORY}`, requestData); return response;};useMutation..

[TS] useQuery 커스텀 훅 사용하기

❓UseQueryOptions UseQueryOptions는 react-query의 useQuery 훅에서 쿼리의 동작을 제어하는 옵션을 정의하는 타입이다. 이 타입을 사용하여 쿼리의 캐싱, 데이터 재검증, 에러 핸들링, 리트라이 로직 등 다양한 동작을 설정할 수 있다. UseQueryOptions 타입을 사용할 때 react-query에서 총 네 가지 타입 인수를 받는다.TData: 쿼리에서 반환되는 데이터 타입TError: 쿼리에서 반환되는 에러 타입TResult: select 함수를 사용한 후의 데이터 타입 (기본적으로 TData와 동일함)TQueryKey: 쿼리 키의 타입export const useProductDetailsQuery = ( productId: number, options?: ..

[TS] onSubmit와 formData를 사용하여 form 유효성 검사하기

onSubmit로 폼 제출시 유효성 검사하기요구사항에 따르면 MessageForm과 CashReceiptForm 값에 대한 유효성을 한번에 검사해야 한다. 이전에 구현한 내 코드를 보자.가장 상위의 orderPage에서 여러 하위 컴포넌트들을 하나의 폼 태그로 감싸주고 있다. 폴더구조를 살펴보면 OrderMainSection 하위에 메세지 폼이, OrderAsideSection 하위에 현금영수증 폼이 있는 구조이다.📦Order ┣ 📂OrderAsideSection ┃ ┣ 📜component.tsx ┃ ┗ 📜index.tsx ┗ 📂OrderMainSection ┃ ┣ 📂MessageFormSection ┃ ┃ ┗ 📜index..

[TS] useInfiniteQuery와 useInView 훅으로 무한스크롤 구현하기

useInfiniteQuery나는 suspense와 infiniteQuery를 함께 사용하고 싶어서 useSuspenseInfiniteQuery 를 사용했다.tanstack React Query v5부터는 initialPageParam 옵션도 추가적으로 작성해줘야 됨.아니면 나처럼 에러 난다. 참고const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useSuspenseInfiniteQuery({ queryKey: ['goodsData', themeKey], queryFn: ({ pageParam = '1' }) => fetchGoodsData(themeKey, pageParam), initialPageParam: '1', getNex..

[TS] React Query와 Suspense, ErrorBoundary 함께 사용하기

처음에는, 전역에서 suspense 옵션을 index.tsx의 queryClient에 전역으로 설정하려고 했다.const queryClient = new QueryClient({ defaultOptions: { queries: { suspense: true, }, },});하지만 아래와 같은 에러가 발생.🚫 개체 리터럴은 알려진 속성만 지정할 수 있으며 'OmitKeyof, "suspense" | "queryKey", "strictly">' 형식에 'suspense'이(가) 없습니다.ts(2353) (property) suspense: boolean아차차.. 리액트 쿼리 v5에서는 suspense: boolean 옵션은 제거되고 useSuspenseQuery, useSuspens..

프론트엔드에서 효과적으로 비동기 처리하기(feat. TanStack Query & Suspense)

프론트엔드에서 비동기 처리 방식보통은 React-Query와 같은 라이브러리를 사용해서 비동기를 처리하는 부분을 정의한다.const {data, error} = useAsyncValue(() => { return fetchSomething();}Promise를 반환하는 함수를 리액트 훅의 인자로 넘기고, Promise의 상태 변화에 따라 hook이 반환하는 data와 error의 값을 적절히 채워준다.그리고 컴포넌트에서 로딩과 에러 처리를 조건문을 사용해서 동시에 수행한다. (나같은 경우도…) if (fetchState.isLoading) { return 로딩 중...; } if (fetchState.isError) { return 상품 목록을 불러오지 못했습니다.; }이와 같은 경..