Reactでは、コンポーネントを作成するためにクラスベースのコンポーネントを利用することができます。
クラスコンポーネントには、特定の静的（static）メソッドやプロパティが存在します。今回は、それらのstaticについてわかりやすく解説します。
staticとは？
まずはstatic自体について説明します。staticはJavaScriptのキーワードの一つで、クラスに関連する静的なメソッドまたはプロパティを定義するために使います。これら静的なメソッドやプロパティは、クラスのインスタンスを生成せずとも、クラスそのものからアクセス可能です。
Reactクラスコンポーネントでのstatic
Reactのクラスコンポーネントでは、staticは特定の目的を果たすいくつかのメソッドとプロパティに使われます。以下にそれらを説明します。
static defaultProps
defaultPropsは、コンポーネントのデフォルトのpropsを定義するための静的プロパティです。これは、親コンポーネントからpropsが渡されなかった場合に使われます。
class MyComponent extends React.Component {
static defaultProps = {
name: 'Default Name'
};
//...
}
static propTypes
propTypesは、コンポーネントが受け取るpropsの型を指定するための静的プロパティです。これは開発中に型チェックを行い、意図しない型のpropsが渡された場合に警告を出すために使われます。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
static propTypes = {
name: PropTypes.string
};
//...
}
static contextType
contextTypeは、クラスコンポーネントでContextを利用するための静的プロパティです。このプロパティを設定すると、そのクラス内でthis.contextを通じて現在のcontext値にアクセスできます。
import MyContext from './MyContext';
class MyComponent extends React.Component {
static contextType = MyContext;
//...
}
以上がReactのクラスコンポーネントで使われる主なstaticの用途です。
これらを理解することで、クラスコンポーネントの機能をより深く活用できるようになるでしょう。