はじめに
React customHooks を利用してロジックとUIを切り離すまでをやってみたシリーズ
前回でロジック作成はできたので
今回は、UI部分となるコンポーネント作成をしていきます。
これまで
Hasuraにユーザーのデータと仮定してデータを作成し
データを外部APIとして取得できるようにして、Next.js（apollo）を使って、クエリやミューテーションできるようにしました
Hasuraから取得したユーザーデータの一覧ページと詳細ページを作りながら、SGとISRを学んできました
このシリーズの目次
- このシリーズの方針
- customHooks を利用してロジックとUIを切り離すまで
最終的なゴール
以下のような構成のアプリを作ることです。
目的（最終的なゴールを達成する）
- 仕事で使っている技術のキャッチアップと復習
- 使う可能性がある技術の理解度向上
UI（コンポーネント）部分のファイルを作成
components/
└── CreateUser.tsx
hooks/
pages/
UI（コンポーネント）部分の実装
モジュールのimport
components/CreateUser.tsx
import { VFC } from 'react'
import { useCreateForm } from '../hooks/useCreateForm'
カスタムフックをコンポーネントで使えるようにする
前回作成したカスタムフックでreturnしている処理を全て分散代入します。
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 ()
}
コンポーネント部分の作成
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本ノック実施中