React.FCってなんぞや？ #JavaScript

はじめに

前職ではTypescriptやReactに触れる事もなく、素のjsやvue.jsを触ることが多く転職を機にReactを触る機会が
大分増えてきました。
そして、他にもコードを追う上でjsx.elementなどとの違いなど、使い分けなど興味が湧いてきたので
自分の勉強と備忘録を兼ねてまとめようと思います。

そもそもReactって何？

Reactとは、Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリのことを言います。
Facebookは勿論のこと、Instagram・Yahoo!・Slack・Netflixや自社含め世界的なWebサイト・Webアプリ、日本含めReactが採用されています。
ReactはJavaScript用のフレームワークと勘違いされることがありますが、実際には上述の通りライブラリとなります。
因みにVue.jsはフレームワークになります(今度フレームワークとライブラリの違いについてもまとめようかな)。

React.FCとは

React.FCは、constによる型定義でコンポーネントを定義できる型です。
コンポーネントというのはReact独自のタグで、オリジナルのタグを作成し、タグの中で他のタグをまとめて定義できるものです。

const Children: React.FC = () => {
  return <div>こんにちは</div>
};

const Parent: React.FC = () => {
  return <Children />
};

コンポーネントの中は、returnで返ったタグがレンダリング(描画)されます。
constで定義したタグはそのまま他のコンポーネントで呼び出して使う事ができます。
また、次のコードで使用しますがモジュール機能のimport、exportを使用することで、

ファイルを再利用することが出来
コードの保守性を高め、管理しやすくなる
何のためのファイルなのかはっきりさせる
といったメリットがあります。

タグに属性値を渡すことができ、親コンポーネントのpropsを使うことが出来る

コンポーネントに属性値を渡してその内容をレンダリングしてみます。
下に例を出します。

src/ChildrenComponent.tsx

import React from "react"

interface Props{
    name:string;
    age:number;
  }

const ChildrenComponent:  React.FC<Props> = (props) => {
    return(
      <div>
        <p>名前:{props.name}</p>
        <p>年齢:{props.age}歳</p>
      </div>
    )
}

export default ChildrenComponent

上記ではinterfaceで型を付けています(typeでも可)。

src/ParentComponent.tsx

import React from "react"
import ChildrenComponent from "./ChildrenComponent.tsx"

const ParentComponent:  React.FC = () => {
    return(
      <div className="app">
        <ChildrenComponent name="Yamada Taro" age= {25} />
      </div>
    )
}

export default ParentComponent

属性値には複数の引数を定義することができます。属性値の型にはstring以外にも様々な型を渡すことが可能で、どんな型でも入れることが出来ます。
文字列の場合は、""で定義しますが、変数やそれ以外のリテラル型やboolean型(true/falseの真偽値)は{}で囲います。

上記の通り、propsは省略可能です。

jsx.elementとReact.FCの違い

jsx.elementとの違いとしてはjsx.elementは引数と返り値の型を2箇所書く必要があります。
また、childrenにおいてですがReact.FCでは関数コンポーネントのPropsにchildrenが元から入っています。
逆に言うとchildrenが必要がない場合でも、childrenに値を入れることができます。
ですので、childrenを使用する場合はReact.FCを使用する場合はchildrenがない場合はjsx.elementを使う等の使い分けをするとわかりやすいのかなと思います。

※react18からReact.FCに暗黙的に含まれていた children が除かれました

最後に

コンポーネントに型をつける際に、React.FCやjsx.elementなどの選択肢が複数ありますがReact.FCだけでほとんど対応は出来ますが用途に応じて使い分けたり統一することが良いプロダクトを作ることにも繋がるのかなと感じました。

今回扱いきれなかった内容も多くあるので、またReact関連の記事についてまとめようかなと思います。

参考記事

わかりやすいかも知れないReact.FCの使い方
 Reactとは？注目されている背景や特徴・メリットを解説
 【React】{children}でコンポーネントを受け渡す