[React] モーダル実装,Toast作り

Q,　React Portalとは何ですか？

React Portal（React ポータル）は、React アプリケーション内でコンポーネントの階層構造を無視して、コンポーネントを DOM ツリー内の別の場所に描画するための仕組みです。通常、React コンポーネントは親から子へデータを伝えるために使われ、コンポーネントの階層は親から子へと下がっていきます。しかし、時にはコンポーネントをルート DOM ツリーの外側に描画したい場合があります。これは、モーダル、ポップアップ、ドロップダウンメニューなど、アプリケーションの他の部分とは独立して表示される UI 要素を実現するのに役立ちます。

React Portal を使用すると、以下のようなシナリオで便利です：

1. モーダルダイアログの表示: モーダルダイアログをアプリケーションのルート DOM ツリーの外に描画して、他のコンポーネントとは独立して表示します。

2. ポップアップメニュー: ポップアップメニューやドロップダウンメニューをアプリケーションの他の部分とは独立して表示し、特定のトリガーに対応します。

3. ポータル付きの UI コンポーネント: UI コンポーネントをポータルを使用して他の場所に再利用することができます。

React Portal を使用する際の基本的な手順は以下の通りです：

1. react-dom ライブラリから createPortal 関数をインポートします。

2. ポータルを使用したいコンポーネント内で、createPortal を使用して描画したい要素（通常は JSX 要素）を指定します。

3. createPortal の第一引数には描画したい要素、第二引数には描画先の DOM ノードを指定します。通常、描画先の DOM ノードは document.body などルート DOM ツリーの外側になります。

以下は簡単な例です：

上記の例では、Modal コンポーネントが createPortal を使用してポータルを作成し、ポータルの中に <p> 要素が描画されます。ポータルの描画先は portal-root という DOM ノードです。このようにして、モーダルダイアログがアプリケーションのルート DOM ツリーの外側に描画されます。

React Portal は、ユーザーインターフェースの改善とコンポーネントの再利用性を高めるのに役立つ重要なツールの一つです。

私が見ても理解できなかったDOM treeやReact Portal tree 後で見返せるように貼っておきます。

REACT : Portal 흐름을 무시(?)하는 Component 이동 : 네이버 블로그 (naver.com)

この方の記事を見て、めちゃめちゃわかりやすいと思ったこと。
Portal＝　門と考えて。
ゲームなどでポータル間を移動するような言葉が身近にあるようにReactでの考えも門を行き来するように考えるとtree構造もよくわかるものである。

https://m.blog.naver.com/psj9102/222141597022

面白いリアクトちゃん。いっぱい勉強したい！。