리액트 html 코드 삽입하기 (dangerouslySetInnerHTML)

리액트 전체 링크

 

아래와 같이 qnaList의 내용을 바꿔보자.

const qnaList = [
  {
    category: "category1",
    question: "what is that ? 1",
    answer: `<p>this is react. 1</p>
    <span>hello!!</span>
    <p>1 &lt; 2</p><br/>
    `,
  },
  ...
];

 

하지만 html 코드는 반영이 되지 않고 그대로 문자열 처리가 된다.

 

아래와 같이 코드를 수정하면 html 코드를 그대로 반영한다.

          {/* <span className="FAQ-card-answer">{item.answer}</span>*/}
          <span className="FAQ-card-answer" dangerouslySetInnerHTML={{ __html: item.answer }}></span>