【TypeScript×React】React.FCとは? その特徴

TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。

最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。

React.FCとは？
React.FCの特徴
1. childrenを定義しなくても使用できます(React18からはできません🙅‍♀️)
2. Propsを使用できます

React.FCとは？

略さずに書くと、React：FunctionComponent。型の名前です。

Reactには、関数（ファンクション）コンポーネントと、クラスコンポーネントがあるのは有名ですが、その関数コンポーネントを表します。

以下のように使用可能で、「MainはReactの関数コンポーネントですよ。」と定義されているわけです。

import React from 'react';

const Main: React.FC = () => {
  return(
    <div>
      <h1>Main</h1>
    </div>
  );
}

ちなみに、’react’ から FCをインポートしておけば、以下のように書くことも可能です。

import { FC } from 'react'; // ReactではなくFCをインポート

const Main: FC = () => {
  return(
    <div>
      <h1>Main</h1>
    </div>
  );
}

React.FCの特徴

childrenを定義しなくても使用できます(React18からはできません🙅‍♀️)

引数には記載する必要がありますが、propsの型定義なしで使用可能です。これは楽です。

2022年3月安定版リリースのReact18より、React.FCから暗黙のchildrenが取り除かれました。

import React from 'react';

const Main: React.FC = ({children}) => {
  return(
    <div>
      <h1>Main</h1>
      {children}
    </div>
  );
}

// ReactNodeの場合、childrenをpropsの型指定にchildrenを加える必要があります
type Props = {children: React.ReactNode}
const Main2: React.ReactNode = ({children}: Props) => {
  return (
    <div>
      <h1>Main2</h1>
      {children}
    </div>
  )
}

childrenの使用例を1つあげます。

上記のchildrenを渡したMainコンポーネントの中にSubコンポーネントが入っていますね。これは、Mainコンポーネントの{children}が入っている部分にSubコンポーネントが入ることを意味しています。

import React from 'react';
import Main from 'Main';
import Sub from 'Sub';

const App: React.FC = () => {
  return (
    <Main>
      <Sub/>
    </Main>
  );
}

Propsを使用できます

当たり前といえば当たり前ですが、propsを使用できます。
一旦書き方を見てみましょう。

import React from 'react';

// Propsの型指定
type InfoProps = ({
    id: number
    name?: string //TypeScriptの場合「?」をつければ、そのプロパティはオプションになる。
    infoList: Array<string>
});

const Main: React.FC<InfoProps> = ({id, name, infoList}) => {
    return(
        <div>
            {infoList.map((el)=>{
                return(
                    <div>
                        {/* 省略 */}
                    </div>
                )
            })}
        </div>
    );
}

注意ポイントは以下2つです。