エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

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に変更がない限り、親コンポーネントが再レンダリングされてもこのコンポーネントは再レンダリングしない」ようにできる。 必要に応じて利用する。

おわりに

コンポーネントを作成するときに必要な要素をメモした。