[React] 문자열로 이루어진 태그를 페이지에 반영하는 법

사용자가 입력한 문자열을 그대로 표시하는 앱이 있다고 가정해보자. content에 사용자가 입력한 스크립트에 대한 정보가 들어있고, 이를 페이지에 보여준다.

const content = ` <h3>제목3</h3>
  <p>본문</p>`;

root.render(
  <p>{content}</p>
);

 

다음과 같이 입력하면 h3태그와 p태그는 이스케이프 처리되어 태그가 아닌 일반 문자열로 페이지에 반영된다.

이를 통해 의도하지 않은 코드의 침입을 방지할 수 있지만, 경우에 따라서는 동적으로 HTML 문자열을 생성하여 페이지에 반영하고 싶은 경우도 있을 수 있다. 이럴 때는 dangerouslySetInnerHTML 속성을 활용할 수 있다.

 

const content = ` <h3>제목3</h3>
  <p>본문</p>`;

root.render(
  <p dangerouslySetInnerHTML={{ __html: content }}></p>
);

실제로 dangerouslySetInnerHTML 속성으로 지정한 텍스트는 이스케이프 처리되지 않고 그대로 요소 아래에 삽입되는 것을 확인할 수 있다. 자바스크립트로 얘기하자면 1번째 예시는 textContent 프로퍼티를 설정하는 반면, dangerouslySetInnerHTML 속성은 innerHTML 프로퍼티를 설정한다고 생각하면 된다.

 

참고: 따라하며 쉽게 배우는 모던 리액트 완벽 입문