いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴9年）で、資格は13個保有しています。
結論、dangerouslySetInnerHTMLはHTMLの埋め込みなどに便利です。
本記事を読めば、dangerouslySetInnerHTMLを使う方法が理解できるので早速見ていきましょう。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいね♪
dangerouslySetInnerHTMLは何に使う？
dangerouslySetInnerHTMLはHTMLの埋め込みに使います。
HTMLを埋め込むのに便利ですが、スクリプトも実行される危険性があるので注意しましょう。
いずみXSS（クロスサイトスクリプティング）の要因になるので注意してくださいね。
⇨dangerouslyとあるのはセキュリティ的に危険だからです。
dangerouslySetInnerHTMLの使い方
dangerouslySetInnerHTMLは、「__htmlプロパティを持つObjectを渡す」ことで使えます。
const App = () => {
const html = `
<html>
<script>
alert('うんち');
</script>
<body>
<div>
<button onClick="alert('うんち')">うんち爆弾</button>
</div>
</body>
</html>
`;
return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
};↑のようにhtmlを渡してあげればOKです。
dangerouslySetInnerHTMLを使う際の注意点
dangerouslySetInnerHTMLを使う際は、XSS（クロスサイトスクリプティング）に注意しましょう。
埋め込むHTMLが決まっている場合は問題ありませんが、動的に変わる場合はサニタイズした方が良いかもしれません。
いずみ固定のHTMLを埋め込むだけなら十分使えるので、用途を考えて使用しましょう。
よくある質問
dangerouslySetInnerHTMLは何に使いますか？
HTMLの埋め込みに使います。
dangerouslySetInnerHTMLはどのように使うのですか？
「__htmlプロパティを持つObjectを渡す」ことで使えます。
dangerouslySetInnerHTMLを使う際の注意点はありますか？
HTMLを埋め込むので、XSS（クロスサイトスクリプティング）に注意しましょう。
まとめ
今回は、dangerouslySetInnerHTMLを使う方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Reactの勉強なら「React.js＆Next.js超入門 第2版
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
