Reactでjsonファイルを読み込む

はじめに

Reactを使っている際に、動作テスト用にローカル配下のjsonデータを読み込むことがあったので、やり方を備忘録程度に書き残す。
（他にやり方あれば是非コメント欄に）

やり方

方法

import文を使って読み込む

import Data from "[jsonファイルのパス]"

例

カスタムフックでの利用を想定した場合のものを以下に記載する。

useAllUser.ts

import { useState } from "react"
import { User } from "../types/api/User"
import Data from "../_test_data/user.json"; // これを追加する

export const useAllUser = () => {
    const [users, setUsers] = useState<Array<User>>([])
    const getUsers = () => setUsers(Data)
    return { users, getUsers }
}