yoneyonekun.com フロントエンド始めたてのため備忘録です。
React.FCは、Reactのコンポーネントを型定義する際に使用する型エイリアス(いわば、型を定義するための名前)です。
そもそも関数コンポーネントとは
Reactのコンポーネントには、クラスコンポーネントと関数コンポーネントの2種類あるがコードの可読性や使いやすさ、パフォーマンスの点から関数コンポーネントが主流となっている。
React.FCの役割
React.FCを使うと、関数コンポーネントに対してReactの型であることを明示することができるため、型チェックが効くようになります。
1 2 3 4 5 | import React from "react"; const HogeComponent: React.FC = () => { return <div>Hoge</div> } |
このように書くことでHogeComponentがReactの関数コンポーネントである事がTypeScriptによって認識されます。
React.FCを使うメリット
型安全性：コンポーネントのpropの型定義がしやすくなる。
以下React.FCの例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React from 'react'; // props の型を定義 type MyProps = { name: string; } const MyComponent: React.FC<MyProps> = (props) => { return <div>Hello, {props.name}!</div>; }; // 使用するとき const ReactFCExample = () => { return <MyComponent name="React" />; } export default ReactFCExample; |
結論
React.FC は、関数コンポーネントの型定義をシンプルに行うためのツールで、特に TypeScript を使うときに便利です。props の型定義ができ、型安全性が向上するので、エラーの予防や予測がしやすくなります。