웹 개발을 하다 보면 API를 통해 데이터를 받을 때, 종종 HTML 태그가 포함된 문자열을 처리해야 할 경우가 있습니다. 이때 데이터를 그대로 React 컴포넌트에 넣으면 HTML 태그가 화면에 그대로 텍스트로 표시되어 의도한 대로 렌더링되지 않습니다. 이를 해결하는 방법에 대해 알아보겠습니다.
API에서 JSON 형식으로 데이터를 받을 때, HTML 태그를 포함하는 경우, 해당 데이터를 React 컴포넌트에 직접 삽입하면 HTML 태그가 텍스트로 취급됩니다.
이와 같이 화면에 데이터 그대로 출력 되는걸 볼 수 있습니다.
React에서는 dangerouslySetInnerHTML 속성을 사용하여 문자열 내의 HTML 태그를 실제 DOM으로 렌더링할 수 있습니다. 이 속성을 사용하면, API에서 받은 HTML을 안전하게 처리할 수 있습니다.
이 방법을 사용하면, apiData에 포함된 HTML 태그들이 정상적으로 렌더링됩니다.
예를 들어, apiData = '<div>hello</div>'라면, 화면에 hello라는 텍스트가 <div> 태그 안에 표시됩니다.
개발하는 화면에 그대로 반영해 보았습니다.
전 : { 데이터 함수명 }
후 : <span dangerouslySetInnerHTML = {{ _html: 함수명, }} />
위에서 알려준 "후"와 같은 방식으로 dangerouslySetInnerHTML을 사용하면, API로 받은 코드가 실제 HTML로 렌더링됩니다.
font 태그는 빨간색 텍스트로 표시되며, b를 통해 굵은 텍스트로 보이게 됩니다.
React에서 이를 안전하게 처리할 수 있습니다.
이와 같이 dangerouslySetInnerHTML를 반영한 결과를 볼 수 있습니다.
주의사항
- dangerouslySetInnerHTML은 이름에서 알 수 있듯이 보안 위험이 있을 수 있습니다. 외부에서 받은 데이터를 그대로 렌더링할 경우 XSS(교차 사이트 스크립팅) 공격에 취약할 수 있기 때문입니다. 예를 들어, 악의적인 스크립트가 포함된 HTML 코드가 렌더링되면 사용자에게 위험한 행동을 일으킬 수 있습니다.
따라서 dangerouslySetInnerHTML을 사용할 때는 다음과 같은 조치를 취해야 합니다.
- 신뢰할 수 있는 데이터만 사용: 외부 API나 서버에서 데이터를 받을 때, HTML 태그가 포함된 데이터를 신뢰할 수 있는지 확인하고, 가능한 경우 HTML을 필터링하거나 sanitization(정화) 작업을 거쳐야 합니다.
- 라이브러리 사용: HTML을 처리할 때 XSS 공격을 방지하기 위해 DOMPurify와 같은 라이브러리를 사용하여 불필요한 스크립트를 제거할 수 있습니다.
결론
- HTML 태그가 포함된 데이터를 React에서 렌더링하려면 dangerouslySetInnerHTML을 사용해야 합니다.
- 보안상의 이유로 외부에서 받은 데이터는 항상 신뢰할 수 있는지 검증해야 하며, XSS 공격을 방지하기 위해 필터링 또는 sanitization이 필요합니다.
- DOMPurify와 같은 라이브러리를 사용해 안전하게 HTML을 처리할 수 있습니다.