react-queryの適用

このドキュメントでは、reactプロジェクトでreact-queryモジュールを使用する方法の簡単な使い方をまとめます.

react-queryを選択した理由

既存のreact-queryモジュールを使用する前にバックエンドと通信する場合、クライアントには注意すべき点がたくさんあります.データの取得中に手動でロードプロセスに参加し、キャッシュのためにreduxにデータを保存し、再びサーバにデータを要求する前にデータを確認し、確認後はデータがない場合にのみサーバに要求しようとした.この過程で、コードの行が長くなり、キャッシュが必要なときに宣言するredox変数が多くなります.React-queryは、開発者のキャッシュ、サーバへのデータのインポート、同期および更新のタスクを簡略化します.
これらの内容はreact-query公式ドキュメントの内容に基づいて整理されています.react-query正式ドキュメント
1.サーバがデータをインポートするために作成したコードの可読性を向上させる.

の実際に比べて、コード量は大幅に減少しました.react-queryが提供するuseQuery hookは{data、isLoading、error}を提供します.loadに対してload変数を個別に作成する必要はなく、受信したデータを個別に保存する必要もありません.

2.キャッシュ

既存の反応項目を行う場合,状態管理ライブラリの1つであるReduxを使用した経験がある.したがって、redoxにサーバが受信したデータを格納してキャッシュしたのを覚えています.しかしreact-queryでは、実際にキャッシュは自分で処理するので、開発者はあまり気にする必要はありません.

3.性能

react-query自体が性能にも大いに役立つそうです.まだ感じていませんが、本内容の詳細については、プロジェクト学習を再開します.

設定

npm i react-query

取り付け後、最上階の素子にQueryClientProviderで包むだけでよい.

const queryClient = QueryClient();
return (
<QueryClientProvider clinet={queryClient}>
<App/>
</QueryClientProvider>
)

React-query DevTools

react-queryはDevToolsを持参します.実際の使用結果は、どのデータがどのキーに格納されているかを容易に決定できることを示しており、デバッグにも役立つようです.

const queryClient = QueryClient();
return (
<QueryClientProvider clinet={queryClient}>
<App/>
<ReactQueryDeveTools initialIsOpen={false}/>
</QueryClientProvider>
)

useQueryフックの使用

使い方は簡単です.useQuery hookを使用して、3つのパラメータを渡します.このうち1、2番は必須で、3番は選択です.
param1) unique key
param2) API func
param3) options

    const { isLoading: infoLoading, data: infoData } = useQuery<[Interface]>(
    	//string을 통해 unique key값을 결정해도 된다.
        //해당 경우는 "info" 라는 키가 여러개를 참조할 경우 위와 같이 배열로 1번째 index값에 구분을 해주었다.
        ["info", [unique value]], 
        () => [API 함수](),
        {
            refetchInterval: 3000
        }
    );