React customHooks を利用してロジックとUIを切り離すまでをやってみた（3/5）〜コンポーネント（UI）作成〜

## はじめに

React customHooks を利用してロジックとUIを切り離すまでをやってみたシリーズ

前回でロジック作成はできたので

https://qiita.com/ryosuketter/items/67b168491fd5a186796e

今回は、UI部分となるコンポーネント作成をしていきます。

## これまで

Hasuraにユーザーのデータと仮定してデータを作成し

https://qiita.com/ryosuketter/items/8b01d53d0609f78c2e0e

https://qiita.com/ryosuketter/items/59a05d4eb5c715287ded

データを外部APIとして取得できるようにして、Next.js（apollo）を使って、クエリやミューテーションできるようにしました

https://qiita.com/ryosuketter/items/9e18295d78dc12a1a7f5

Hasuraから取得したユーザーデータの一覧ページと詳細ページを作りながら、`SG`と`ISR`を学んできました

https://qiita.com/ryosuketter/items/442db08856093e6cfeea

## このシリーズの目次

- [このシリーズの方針](https://qiita.com/ryosuketter/items/1142c47913440369b660)
- customHooks を利用してロジックとUIを切り離すまで
    - [ロジックの作成](https://qiita.com/ryosuketter/items/67b168491fd5a186796e)
    - [コンポーネント（UI）作成](https://qiita.com/ryosuketter/items/1dee37be7e4fe62ef6f0)👈 今回はコレ
    - [不要なレンダリングが走らないための工夫（準備編）](https://qiita.com/ryosuketter/items/548dbd70ae835fd66dfb)
    - [不要なレンダリングが走らないための工夫（検証 & 改善編）](https://qiita.com/ryosuketter/items/4fb9b560b0d076491d91) 

## 最終的なゴール

以下のような構成のアプリを作ることです。

![スクリーンショット 2021-10-18 17.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/e8a9a2e1-2723-4fec-77ef-be3b9eefdd81.png)

### 目的（最終的なゴールを達成する）

- 仕事で使っている技術のキャッチアップと復習
- 使う可能性がある技術の理解度向上

## UI（コンポーネント）部分のファイルを作成

```
components/
└── CreateUser.tsx
hooks/
pages/
```

## UI（コンポーネント）部分の実装

### モジュールのimport

```ts:components/CreateUser.tsx
import { VFC } from 'react'
import { useCreateForm } from '../hooks/useCreateForm'
```

### カスタムフックをコンポーネントで使えるようにする

前回作成したカスタムフックでreturnしている処理を全て分散代入します。

https://qiita.com/ryosuketter/items/67b168491fd5a186796e

```ts:components/CreateUser.tsx
import { VFC } from 'react'
import { useCreateForm } from '../hooks/useCreateForm'

export const CreateUser: VFC = () => {
  const {
    handleSubmit,
    username,
    usernameChange,
    printMsg,
    text,
    handleTextChange,
  } = useCreateForm()
  return ()
}

```

### コンポーネント部分の作成

```ts:components/CreateUser.tsx
import { VFC } from 'react'
import { useCreateForm } from '../hooks/useCreateForm'

export const CreateUser: VFC = () => {
  const {
    handleSubmit,
    username,
    usernameChange,
    printMsg,
    text,
    handleTextChange,
  } = useCreateForm()
  return (
    <>
      <div className="mb-3 flex flex-col justify-center items-center">
        <label>Text</label>
        <input
          className="px-3 py-2 border border-gray-300"
          type="text"
          value={text}
          onChange={handleTextChange}
        />
      </div>
      <form
        className="flex flex-col justify-center items-center"
        onSubmit={handleSubmit}
      >
        <label>Username</label>
        <input
          className="mb-3 px-3 py-2 border border-gray-300"
          placeholder="New user ?"
          type="text"
          value={username}
          onChange={usernameChange}
        />
        <button
          className="my-3 py-1 px-3 text-white bg-indigo-600 hover:bg-indigo-700 rounded-2xl focus:outline-none"
          type="submit"
        >
          Submit
        </button>
      </form>
    </>
  )
}

```

## まとめ

今回は、UI部分となるコンポーネント作成について書きました。

## 次回

ロジックとUIは切り離せたましたが、不要なレンダリングが走らないための工夫を説明するための準備を次回はします。

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103