Next.jsでAPIからデータを取得するために利用するReact Hooks

以下の2つのFooksが扱えればOK

• useState
• useEffect

useStateについて

useStateは、関数コンポーネントで状態を管理するためのHooksです。
以下のように記載します。

const [状態, 更新関数] = useState(初期状態);

// 例
const [count, setCount] = useState(0);
// 初期値が０の値がcountに格納される。
// setCountはcountの値を更新するための関数。
// setCount(2)としたらcountの値が2になる。
// countの値が変わるたびにレンダリングされる。

API経由でデータを取得するときには型の情報が必要になります。

  type Article = {
    id: number;
    name: string;
    title: string;
    body: string;
    createdAt: string;
    updatedAt: string;
    };

    export default function ArticleList() {
    const [articles, setArticles] = useState<Article[]>([]);

    ...
    }

上記の例では、useStateの引数にArticle[]という型を指定しています。
例えば、prismaで定義したArticleモデルの型を指定することで、API経由で取得したデータを格納することができます。

useEffectについて

useEffectは、関数コンポーネントで副作用を扱うためのHooksです。
ここでいう副作用とは、データの取得やログの出力などが当てはまります。

useEffectは、以下のように記載します。

    useEffect(() => {
    // 副作用の処理
        return () => {
        // コンポーネントのアンマウント時に実行する処理
    }}, [依存する値])

useEffectの第一引数には、副作用の処理を記載します。
第二引数には、依存する値を指定します。依存する値が変更されたときに副作用の処理が実行されます。
useStateと一緒に使われることがあります。

    const [articles, setArticles] = useState<Article[]>([]);

    useEffect(() => {
    axios
      .get("/api/article") // axiosを使用してAPIエンドポイントにGETリクエストを送信
      .then((response) => setArticles(response.data)) // レスポンスデータをセット
      .catch((error) => console.error(error)); // エラーハンドリング
  }, []);

上記の例では、API経由でデータを取得しています。
axiosを使用してAPIエンドポイントにGETリクエストを送信し、レスポンスデータをセットしています。
第二引数には、空の配列を指定しています。これは、コンポーネントのマウント時に一度だけ副作用の処理を実行するためです。

最後に

useStateとuseEffectを使いこなせば、API経由でデータを取得することができます。
より複雑な状態を扱う場合はuseReducerを使用することもあるようです。