[Next.js] dangerouslySetInnerHTML

이전 글
getStaticProps
getStaticPaths

remark-html로 파싱한 마크다운 문서는 <h1>my third file</h1> <p>congratulations!</p> 형태를 갖는다. 마크업 태그를 가지고는 있지만, 단순한 string에 불과하다. 페이지에 뿌리기에 적절하지 않다.

React에서는 HTML 직접 설정은 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML에 객체를 전달하도록 지향한다.

const Post = ({post}) => {
  return <div dangerouslySetInnerHTML={{ __html: post }} />;
};

아래와 같은 마크다운 문서가 파싱되었다면,

---
title: Welcome Everyone
date: 2022.02.02
category: thoughts
---

# Welcome everyone!

This is my first blog post!

Thank you for reading

클라이언트 페이지에는 다음과 같이 나타날 것이다.

Welcome everyone!
This is my first blog post!
Thank you for reading

콘솔을 확인해 보면 정상적으로 출력된 태그를 확인할 수 있다.

참고
노마드 코더 - 캐럿마켓 클론코딩
React Docs - dangerouslySetInnerHTML