[240620 TIL] Tanstack Query + Zustand

Zustand 스토어에서 expends의 초기값을 설정하는 방법으로 useQuery를 사용할 수 있지만, useQuery는 React 컴포넌트 내부에서만 사용할 수 있습니다. 대신 Zustand와 Tanstack Query를 함께 사용하여 상태를 관리할 수 있는 패턴을 사용할 수 있습니다.

다음은 Zustand와 Tanstack Query를 함께 사용하여 초기 데이터를 설정하는 방법입니다.

1. Tanstack Query와 Zustand 설정

먼저, react-query 라이브러리와 Zustand를 설치해야 합니다.

npm install @tanstack/react-query zustand

2. Zustand 스토어 설정

Zustand 스토어를 설정하고, expends 상태를 관리하는 방법을 정의합니다.

import { create } from "zustand";

interface Ledger {
    expends: any;  // 타입을 변경하세요.
    month: number;
    setExpends: (expends: any) => void;  // 타입을 변경하세요.
    selectMonth: (selectedMonth: number) => void;
}

const getLsMonth = () => {
    const savedMonth = localStorage.getItem("selectedMonth");
    return savedMonth ? parseInt(savedMonth, 10) : 1; // 기본값 1월
};

export const useLedgerStore = create<Ledger>((set) => ({
    expends: null,
    month: getLsMonth(),
    setExpends: (expends) => set({ expends }),
    selectMonth: (selectedMonth: number) => {
        localStorage.setItem("selectedMonth", selectedMonth.toString());
        set({ month: selectedMonth });
    },
}));

3. React 컴포넌트에서 Tanstack Query와 Zustand 사용

React 컴포넌트에서 Tanstack Query의 useQuery를 사용하여 데이터를 가져오고, Zustand 스토어에 데이터를 설정합니다.

import React, { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useLedgerStore } from '@/zustand/ledgerStore';
import axios from 'axios';

const fetchExpenses = async () => {
    const { data } = await axios.get('https://bedecked-candy-relish.glitch.me/expenses');
    return data;
};

const LedgerComponent = () => {
    const { data, error, isLoading } = useQuery(['expenses'], fetchExpenses);
    const { expends, setExpends } = useLedgerStore();

    useEffect(() => {
        if (data) {
            setExpends(data);
        }
    }, [data, setExpends]);

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>Ledger</h1>
            {expends ? (
                <pre>{JSON.stringify(expends, null, 2)}</pre>
            ) : (
                <div>No expenses available</div>
            )}
        </div>
    );
};

export default LedgerComponent;

코드 설명

1. Zustand 스토어 설정:
   • setExpends 액션을 정의하여 expends 상태를 업데이트합니다.
   • selectMonth 액션을 정의하여 선택된 월을 업데이트합니다.
2. React 컴포넌트에서 Tanstack Query 사용:
   • useQuery를 사용하여 데이터를 비동기적으로 가져옵니다.
   • 데이터를 가져오면 useEffect 훅을 사용하여 Zustand 스토어의 expends 상태를 업데이트합니다.

이 패턴을 통해 Zustand와 Tanstack Query를 함께 사용하여 초기 데이터를 설정하고, 상태 관리를 효율적으로 수행할 수 있습니다.