あれ？ド忘れした（ゲシュタルト崩壊）
React初学者です。
ハンズオンで学んでいて、自分でコンポーネントを1から書こうとして、エラーになり、いつも通りの書き方が分からなくなりました。
普段ふつーに見て真似して書いているのに、いざ自分で1から書こうとしたら思い出せないことってありませんか？
自分が今回そうでした。。。
この経験を踏まえて鉄板となる記事を書こうと思った次第です。
私が躓いたのは、default exportと呼ばれるタイプのexportの仕方でした。
Reactコンポーネントの関数の間違った書き出し方(default export)
以下は×です。
❌
export default function App = () => {
}
おっと！function宣言とアロー関数が混ざってしまった・・・
ということで、アロー関数思い出した！！で、次も×です。
❌
export default const App = () => {
}
Reactコンポーネントの関数の正しい書き出し方(default export)
①function宣言
⭕
export default function App() {
}
②アロー関数を変数に代入（最後にexport）
⭕
const App = () => {
}
⭕
export default App
因みにdefaultって何？
1ファイルに1つだけ代表的に行うexportに付けます。
import時{}を付けません。
import時の変数名はimport側でなんでも付けて良く、import側で付けた変数名で使い回せます。
exportには、
・default export
・named export
があります。
次のような表で区別できます。
| default | named | |
|---|---|---|
| 1ファイル内設置数 | 1つだけ | いくつでもOK |
| import時の{} | なし | 必要 |
| import時の名前 | 自由 | export側の名前で一致させる |
| 利点 | 1ファイル1コンポーネントで分かり易い。ViteやNext.jsのページなど、テンプレートやフレームワークがdefaultを前提としていることが多い | import時に名前が固定されるので、タイプミスで別名importされる事故が無い。リネーム時のエディタの追従性が高い。大きめのプロジェクトで「default禁止」にしていることも。 |
Reactのコンポーネントは、default exportである必要はありません
それぞれ、上記のような利点があります。
おわりに
講義でそう言えば、さら～っと説明があった記憶があるexportタイプ・・・・・
案外、確りと理解しておかないと、自分でアウトプットする際に、迷子になってしまう箇所と分かりました～！