dangerouslySetInnerHTML은 React에서 innerHTML을 사용하기 위한 React의 대체 방법이다. React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야한다.
하지만 나는 멘션같은 특정 조건에 따라 특정 문자열의 색상을 바꾸거나 bold 처리를 하는 등의 방식을 사용하기 위해서 사용했다.
dangerouslySetInnerHTML 사용 방법은 어렵지 않다.
<div dangerouslySetInnerHTML={{__html: HTML문자열 }}>방식으로 사용할 수 있다. 기존에 사용하는 React의 div, box 등에 dangerouslySetInnerHTML를 입력하고 HTML형태의 문자열을 삽입함으로써, <span>, <b> 등의 HTML 문법을 사용할 수 있고, style을 이용하여 inline 방식의 css도 적용이 가능하다.
이러한 방식을 사용하여, 특정 문자열의 색상을 변경시키거나, bold 처리 하는 방식으로 커스텀할 수 있다.