react(Next.js)のカスタムフック・名前空間!useEffectと違い!

覚書です。ファイルわけや再利用の際に便利な奴です。

react(Next.js)のカスタムフック!useEffectと違い!

Reactでは、UIとロジックを分離することが推奨されています。その際に便利なのがカスタムフックです。

• トップレベルで使う (条件付きやループ内でフックを呼び出すことはできません。)
• useからはじまる関数名
• 戻り値はオブジェクトを含めて何でも返せるようです。カスタムフックがStateを返すか、Refを返すかは、そのフックの設計によります。

reactはuseが好きですね。useState、useEffect などは React に組み込まれている組み込みフックです。フックのお仲間であり、カスタムフックとは違います。

ReactにおけるPropsの流れは、通常、親コンポーネントから子コンポーネントへと下降していきます。カスタムフックはこの流れに若干の違いをもたらしますが、基本的な原則は同じです。

コンポーネントとカスタムフックの関係

1. コンポーネントからカスタムフックへ: コンポーネントからカスタムフックへのPropsの流れは直接的ではありません。カスタムフックは、コンポーネント内で呼び出され、コンポーネントのプロパティやステートに基づいて動作することがあります。たとえば、コンポーネントの特定のステートやPropsを使ってカスタムフック内のロジックを制御することが可能です。
2. カスタムフックからコンポーネントへ: カスタムフックからコンポーネントへのPropsの流れはより一般的です。カスタムフックは値（ステート、関数など）を返し、これらの値はコンポーネント内で使用されます。たとえば、カスタムフックがステートとセッター関数を返す場合、これらはコンポーネント内で直接使用できます。
3. 両方の方向性: 一般的にPropsは親から子へと流れますが、カスタムフックの場合は少し異なります。カスタムフックはコンポーネントによって引数を受け取り（コンポーネントからカスタムフックへ）、戻り値としてステートや関数をコンポーネントに提供します（カスタムフックからコンポーネントへ）。

react(Next.js)の名前空間

名前空間を利用してファイルわけできます。

名前空間を使用する: モジュールやクラスを使用して、関数や変数を名前空間の中に隠蔽することで、名前の衝突を避けることができます。

モジュールを使用して名前空間を模倣する: 「名前空間 (namespace)」は、プログラミングにおいて、変数、関数、型、モジュールなどの識別子をグループ化し、それらの名前が他の名前と衝突するのを防ぐためのものです。

ただし、namespaceを使うことはもはや稀のようです。そのやり方は少し古いようです。JavaScript (ES6以降) や TypeScript では、モジュールを使用して名前空間のような機能を実現できます。

例: TypeScriptでの実装

export function displayJobStatus() {
    console.log("仕事.");
}

export function displayLoveStatus() {
    console.log("恋愛");
}

import * as LoveProfile from './loveProfile';
import * as JobProfile from './jobProfile';

LoveProfile.displayLoveStatus();
JobProfile.displayJobStatus();

ただ、namespaceは使えなくなったわけではなく大半はimport * で事足りるということです。明示的にnamespace構文も使う機会はあるかもしれませんので覚えておくとよいです。

react(Next.js)のマッピング

マッピングのサンプルはこちらの記事に少し書いてあります。

参考になれば幸いです。