stopPropagation

stopPropagationが存在するのは、イベントbundingを防止するためです.
イベントbublingという言葉はよく知られていませんが、簡単な例で理解してみましょう.

<div onClick={closeModal}>
  <div className="modalContainer">
    <button onClick={closeModal}>CLOSE</button>
	<h1>TITLE</h1>
	<p>CONTENTS</p>
    	...
  </div>
</div>

モデル構成部品とモデル外部をクリックしてモデルを閉じる例を実装したとします.
もちろん、モードを持つ親divラベルをクリックすると、それを閉じるように整理できますが、このように作成すると、モード自体をクリックするだけで閉じることになります.
これは、サブラベルで発生したイベントが親に伝播し、イベントbubling現象が発生するためです.
次にstopPropagationを適用する例を見てみましょう.

const stopPropagation = (e) => {
  e.stopPropagation();
};

<div onClick={closeModal}>
  <div className="modalContainer" onClick={stopPropagation}>
    <button onClick={closeModal}>CLOSE</button>
	<h1>TITLE</h1>
	<p>CONTENTS</p>
    	...
  </div>
</div>

イベントを伝播を必要としないタグに掛け、e.stopPropagation()を呼び出すことによって、イベント伝播を回避することができ、モデル要素のdim処理を簡略化することができる.