dangerouslySetInnerHTML

const highlights = (text: string) => {
  return text.replace(/#([\w|ㄱ-ㅎ|가-힣]+)/g, "<mark>$&</mark>");
};

const PostInfoModal = () => {
  return (
    ...
    <ModalContent>{highlights(post.postContent)}</ModalContent>
    ...
  );
}

위 코드와 같이, 개발 중 텍스트에서 정규식 패턴을 적용해 앞뒤로 태그를 붙여줘야 하는 경우가 생겼다. #태그 형태의 해시태그 문자열에 디자인을 주기 위함인데, 따라서 저렇게 문자열 형식을 React에서 태그로 변환해주길 바랬다.

하지만, 위 사진처럼 문자열 그 자체가 태그 내부에 value 값으로 들어가게 되었다.

문자열을 DOM Element로 변경해주는 함수가 있을지 검색 결과 이 포스트를 찾았다. 벨로퍼트 블로그에 따르면, React에서는 Cross-Site-Scripting(XSS) 공격을 막기 위해 렌더링 메서드 내부에 html 태그가 담겨있는 string 형태를 렌더링하면, 태그가 안 먹히고 문자열 그대로 렌더링 된다고 한다.

<ModalContent>
  <div dangerouslySetInnerHTML={{ __html: highlights(post.postContent) }}></div>
</ModalContent>

사용 방법은 위 코드와 같이, JSXElement가 아닌 일반적인 태그에 dangerousSetInnerHTML 속성을 전달하면 된다.