Reactを学ぶ過程で、「マウント」と「レンダリング」を理解するのは非常に大切です。これらの概念をアートギャラリーというアナロジーを使って、もっと直感的に理解しましょう。

🎨 絵を描くアーティスト = レンダリング:
Reactのコンポーネントはアーティストのようなものです。新しい情報や変化があるたびに絵を描きます🎨。これがレンダリングのプロセスです。しかし、すべての絵が自動的にギャラリーの壁に飾られるわけではありません。
🖼️ 絵を壁に飾る = マウント:
コンポーネントが初めてギャラリーの壁(DOM)に絵を飾るとき、それを「マウント」と言います🏞️。この特別な瞬間は、コンポーネントの一生の中で一度だけ起こります🌟。
🔽 絵を壁から取り外す = アンマウント:
展示が終了したときや、何らかの理由で絵を壁から取り外す必要が生じたとき、そのアクションを「アンマウント」と言います🔽。この瞬間が来ると、絵は再びギャラリーの壁から取り外されます。

🔄 もしギャラリー全体をリフレッシュ（ページリロード）する場合、展示中のすべての絵は一旦壁から取り外され、アーティストが再び絵を描き、ギャラリースタッフが新しい展示として壁に飾ります。

DOMや仮想DOMについてはこちら

🎣 useEffectの魅力

useEffectはReactのHooksの一つで、アクションの後に実行したい副作用を設定する際に使います。副作用は、データの取得、購読、DOMの変更などの操作を含むことができ、コンポーネントのライフサイクルと連動して実行されます。

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

    return () => {
      console.log('Component will unmount');
    };
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、useEffectの効果は、countが変わる度に発動🔥！

🖼️ アンマウントについて具体例を見ていこう

1. 🖼️ ルーティングによるアートギャラリーの部屋の変更:

考えてみてください。あなたが大きなアートギャラリーにいて、「風景画の部屋」から「肖像画の部屋」に移動することにしました。移動すると、「風景画の部屋」の絵🏞️はもう見えなくなり、代わりに新しい「肖像画の部屋」の絵👩‍🎨が目に入ってきます。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

このReactのコードは、アートギャラリーの部屋を変えるようなものです。HomeからAboutに移動すると、前のページのコンポーネント（絵🎨）はアンマウントされ、新しいページのコンポーネントがマウントされます。

2. 🎨 条件的なレンダリングによる絵の取り外し:

アートギャラリーで、特定の絵を見たいお客様だけのために、カーテン🖼️で覆われた特別な展示があると想像してみてください。お客様がボタン🔘を押すと、カーテンが開き、その特別な絵が現れる。再度ボタンを押すと、絵は隠れてしまう。

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(true);

  return (
    <div>
      {showComponent && <MyComponent />}
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
    </div>
  );
}

function MyComponent() {
  return <h2>Hello World</h2>;
}

このコードは、上記の特別な展示のようなものです。ボタンをクリックすることで絵🎨（MyComponent）の表示・非表示を切り替えることができ、非表示にすると、絵はギャラリーの壁から取り外される（アンマウント）のです。

（まとめ）🤔 マウントとレンダリングの関係

レンダリングのみ🎨: stateやpropsが変わると、コンポーネントは新しい絵を描きますが、再度壁に飾ることはしません。
両方🎨🏔️: コンポーネントが初めて部屋に飾られるとき、絵を描いて壁に飾ります。

結局のところ、マウントは絵を描くことを含むけど、絵を描く度に壁に飾るわけじゃない🎨🚫🏔️。