React innerHTML, DOM에 HTML텍스트 삽입하기. Apply dangerouslySetInnerHTML

웹에서 에디터를 개발하거나 게시판 등에서 글을 보여줄 때는

HTML 태그로 감싸진 string들이 필요하게 된다.

 

이 string 데이터를 서버와 통신해야 하는데 만약 여기에 알수없는 <script> 태그가 포함되어 있다면

(XSS 공격 같은) 어떤 일이 일어날 지 알 수 없기 때문에 😱

 

React에서는 innerHTML을 대신하여 dangerouslySetInnerHTML를 사용하게 된다.

공식 문서에도 이 내용이 잘 나와 있고 코드를 그대로 사용해 보았다.

const createMarkup = (content: string) => {
  return {__html: content};
}

const MyComponent = () => {
  const content = "<b>TEST</b>";
  return <div dangerouslySetInnerHTML={createMarkup(content)} />;
}

 

그런데 서버에서 내려오는 데이터가 string 내에 태그를 포함하고 있지만 

< 는 &lt;

> 는 &gt;

로 파싱되어 오는 경우가 있었다.

이 경우에는 replace로 parse해주기 위해 함수를 하나 더 생성했다.

const parseContent = (s: string) => {
  return s.replaceAll("&lt;", "<").replaceAll("&gt;", ">");
};

export const createMarkupContent = (content: string) => {
  return { __html: parseContent(content) };
};

helper.ts로 따로 빼놓고 필요한 곳에서 import 하여 사용함

 

 

DOM 엘리먼트 – React