React 문자열 형태의 html태그 렌더링 하기

React를 사용하다가 html 태그를 리턴하는 함수를 구현했는데 그 태그들이 그대로 출력되는 문제가 발생했다.

수정 전

이를 본래 의도대로 html태그 역할을 하도록 하려면 python에서 datatype을 변경해주듯이

문자열 -> html 로 인식하도록 변경해줘야한다.

 

import React from 'react';

const Test = () => {
  let codes = '<b>Hello world</b>';
  return <div dangerouslySetInnerHTML={{ __html: codes }}></div>;
}

export default Test;

 

수정 후

잘 출력되는 것을 확인