2024-06-04 API 렌더링 시 태그가 그대로 노출되는 문제 해결 방법

예를 들어 웹 페이지를 아래와 같이 렌더링 하고자 하는데,

quill 같은 에디터를 사용하면 데이터 테이블 안에 들어 있는 내용이 코드나 태그가 포함된다. 이를 map메서드나 filter메서드로 렌더링하면 태그가 그대로 렌더링 된다.

 

 

이런 식으로 렌더링을 하고 있을 건데

 

아래 처럼 개선하면 된다.

 

<div className="post__content__box">
  <p dangerouslySetInnerHTML={{ __html: item.content }} />
</div>

 

그러면 아래처럼 잘 렌더링 된다.