はじめに
コンポーネントをインポートする際、以下の違いがあったので整理しました。
export function の場合は、import {Top} from './Top.tsx'
export default function の場合は、import Top from './Top.tsx'
理解したこと
export function
-
名前付き関数と呼ばれる - 1つのファイルに複数の関数を記入出来る
data.tsx
export function add() {/* 処理 */};
export function getAll() {/* 処理 */};
export function delete() {/* 処理 */};
- importの時にそれをまとめて呼べる
App.tsx
import { add, getAll, delete } from './data.tsx';
export default function
-
デフォルト関数と呼ばれる - 1つのファイルに1つの関数
まとめ
名前付き関数は、1つのファイル内で複数の関数を管理出来るので、supabaseの処理を1ファイルにまとめると便利そう。
また必要に応じて、使いたい関数だけ呼び出せるのもメリットだと思います。
デフォルト関数は、ページ全体の表示など大きな枠を扱うのに向いているなと思ったので、うまく使い分けていきたいです。