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ページの更新がスムーズに、そして高速に行えるのです。
次回はこれらの知識をもとにレンダリングとマウントについて、それらの発生時期？について整理してみます。