React × Typescriptでコンポーネントを書く時のテンプレートメモ
はじめに
今回の記事の目的
React × TypeScriptでコンポーネントを追加するときに毎回迷うので、基本となる要素をメモ。
基本のテンプレート
MyComponent.tsx
※ファイル名は大文字から開始
import { memo, ReactNode, VFC } from "react"; type Props = { children: ReactNode; //childrenは「ReactNode」 onClick: () => void; // 関数のprops disabled?: boolean; // 任意のpropsには ? をつける // ・・・その他propsの引数の型 }; export const MyComponent: VFC<Props> = memo((props) => { const { children, onClick, disabeld = false, …その他のprops… } = props; // ・・・処理 return ( // ・・・返却値 ); });
VFC
関数型コンポーネントであることを表す。
任意のprops項目
任意のpropsを指定する場合は、分割代入する際にdisabled = false
といった形で初期値を指定する。
memo
について
memo
関数で囲むことで「propsに変更がない限り、親コンポーネントが再レンダリングされてもこのコンポーネントは再レンダリングしない」ようにできる。
必要に応じて利用する。
おわりに
コンポーネントを作成するときに必要な要素をメモした。