[ react ] dangerouslySetInnerHTML

블로그를 만들던 중에 , hygraph 에서 내가만든 컨텐츠 내용을 가져오는 부분이 있었는데 , hygraph에서 제공해주는 api를 통해서 content 내역을 string 가져와 그대로 뿌려주다 보니 , string 으로 된 html을 우리가 알고있는 html 형태로 바꿔줘야 하는 문제가 생겼다.

그러다가 알게된 dangerouslySetInnerHTML .. ! 어마어마한 녀석을 알게되었다.

 

dangerouslySetInnerHTML 은 무엇인가 ?

-> 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법

 

사용방법

function createMarkup() {
  return {__html: 'First · Second'};
}

 

적용예제

export default function BlogPost({post}){
  return (
    <main className={styles.blogContainer}>
        <div className={styles.inner_blogContainer}>
          {/* <img src={post.coverPhoto.url} className={styles.cover} alt="" /> */}
          
          
          <div className={styles.mainTitleArea}>
            <h1 className={styles.mainTitle}>{post.title}</h1>
          </div>
          <div className={styles.content} dangerouslySetInnerHTML={ {__html:post.content.html}}></div>
        </div>

        <div className={styles.authorArea}>
            <img className={styles.avatarImg}   src = {post.author.avatar.url} alt="" />
            <div className={styles.authtext}>
              <h6> By {post.author.name}</h6>
              <h6 className={styles.date}>{post.dataPublished}</h6>
            </div>
        </div>

    </main>
  )
}