Reactの勉強をする時、特にHooksを勉強する時とかよく「レンダリング」、「マウント」とか、useEffectだと「アンマウント」が出てきたりして「なんだっけ？」と思って何回も出てくるたびに調べ直した人は多いはず。
今回はその説明の大前提である「DOM」とか「仮想DOM」についてわかりやすく整理してみます。

Webページを想像してみて下さい。

そこには文章や画像、ボタンなど、たくさんの要素が表示されています。これを一つ一つのブロックや箱と考えてみると、それぞれの箱には内容や位置、大きさなどの情報があります。

この各々の「箱」の情報や関係性をプログラムで扱うためのものが「DOM（Document Object Model）」です。

可視化: DOM

想像してみてください。

📦 <- これがWebページ全体
├ 📕 ← これがタイトル（例：<h1>タグ）
├ 📗 ← これが段落（例：<p>タグ）
└ 🖼 ← これが画像（例：<img>タグ）

これがとても単純化されたDOMの例です。実際のWebページにはもっとたくさんの箱（要素）が存在します。

ただ、このDOMを直接変更するのは重たい作業。毎回DOMを変更すると、ページの表示が遅くなったり、ちらつきが発生することも。そこで「仮想DOM」の出番です！

仮想DOMって？

仮想DOMは、名前の通り「仮のDOM」。DOMの複製のようなもので、実際のDOMより軽量です。この仮想DOMでまず変更を行い、その変更を効率よく実際のDOMに反映させます。

可視化: 仮想DOM

実際のDOM: 📦📕📗🖼
変更したい内容: 📗を📘に変更したい！

仮想DOMで変更を試みる。
📦📕📘🖼
実際のDOMとの違いを検出。
📗と📘が異なる。
実際のDOMに変更を適用。
📦📕📘🖼

このように、仮想DOMを使うことでWebページの更新がスムーズに、そして高速に行えるのです。

次回はこれらの知識をもとにレンダリングとマウントについて、それらの発生時期？について整理してみます。