【React】exportについて

この記事の目的

• Reactの理解とアウトプット、振り返り用
• Reactでよく使われている基本的な技術を言語化できるようする
• exportについて

exportは２種類ある『default』と『named』

• default export：export default　
• named export：export const

exportの書き方によって、import時の記載が変わってきたりと、よくわからずに触っていたので少し調べてみました。

違いについて

• import時に、{}がつくかつかないか

記載方法default export

Component1.js

import React from "react";

const Component1 = () => {
  return 
     <div>
       default export用コンポーネント１です
     </div>
};

export default Component1;

App.js

//import コンポーネント名(自由) from 'ファイルパス'
import Component2 from "./components/Component2";

記載方法named export

Component2.js

import React from "react";

export const Component2 = () => {
  return 
     <div>
        named export用コンポーネント２です
     </div>
};

App.js

//import { 関数名(固定) } from 'ファイルパス'
import { Component2 } from "./components/Component2";

まとめ

• import時には、{}がつくかつかないかの違いがある
• export default したものを import するときには {} を使わない
• 1ファイル1コンポーネントであれば、 export default を使う方がいいけど基本namedほうが良さそう