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が変わると、コンポーネントは新しい絵を描きますが、再度壁に飾ることはしません。
-
両方🎨🏔️: コンポーネントが初めて部屋に飾られるとき、絵を描いて壁に飾ります。
結局のところ、マウントは絵を描くことを含むけど、絵を描く度に壁に飾るわけじゃない🎨🚫🏔️。