【React】学習ロードマップ take3 ~export~

概要
exportとは
1. named export
2. default export
まとめ
1. 関連

概要

Reactを学習するにおいて、実際に手を動かすのが吉ということで、アプリケーションを作成します。

その中で、exportという概念が出てきたので解説します。

元記事

exportとは

特定の関数、オブジェクトを、他のファイルで使用できるようにするためにする処理。

使用するファイルでは、import文を用いて使用できるようになります。

exportには以下2種があります。

named export

特徴

１つのモジュール内に何度でもexportできる
呼び出すファイルでは、指定の名前でimportしなければならない
エディタでimport文を自動補完してくれる

実装

ColorMessageをexportすると、このような実装になります。

また、named exportは複数可能なので、セットで増やすことができます。

App.jsx
----------------------------------
import { ColorMessage } from "./compornents/ColorMessage";

・
・
<ColorMessage color="blue" message="hello" />
・
・

compornents/ColorMessage.jsx
----------------------------------
export const ColorMessage = (props) => {
  const { color, message } = props;
  const contentStyle = {
    color: color,
    fontSize: "25px",
  };
  return (
    <>
      <p style={contentStyle}>{message}</p>
    </>
  );
};

default export

特徴

１つのモジュール内に1度しかexportできない
呼び出すファイルでは、任意の名前でimportできる
「export default hogehgoe」という記述が必要

実装

ColorMessageをexportすると、このような実装になります。

また、default exportは1つしかできないので、セットで増やすことができません。

App.jsx
----------------------------------
import cmTest from "./compornents/ColorMessage";

・
・
<cmTest color="blue" message="hello" />
・
・

compornents/ColorMessage.jsx
----------------------------------
const ColorMessage = (props) => {
  const { color, message } = props;
  const contentStyle = {
    color: color,
    fontSize: "25px",
  };
  return (
    <>
      <p style={contentStyle}>{message}</p>
    </>
  );
};
export default ColorMessage

まとめ

実際に手を動かして実装することで、イメージを少し掴めてきました。

named exportとdefault exportのどちらをつかうべきか…となると、私はnamed exportかと思います。

いくつか理由はありますが、named exportの方がより柔軟性が高く使いやすいためです。

以上、exportについてでした。参考になりましたら幸いです！

概要

exportとは

named export

特徴

実装

default export

特徴

実装

まとめ

関連

コメント