[Web] dangerouslySetInnerHTML 사용 시 나타날 수 있는 문제점

dangerouslySetInnerHTML을 사용하여 동적으로 HTML 콘텐츠를 삽입할 때, 예상치 못한 태그 생략이나 삭제 문제가 발생할 수 있습니다. 이는 주로 다음과 같은 이유로 발생합니다:

1. HTML 구조의 오류

잘못된 HTML 구조로 인해 브라우저가 자동으로 수정하면서 태그가 생략되거나 변경될 수 있습니다. 예를 들어, 닫히지 않은 태그, 잘못된 중첩 등이 있을 경우 브라우저는 이를 자동으로 수정하며, 이 과정에서 의도치 않은 변경이 발생할 수 있습니다.

2. 브라우저의 보안 정책

일부 태그는 보안상의 이유로 브라우저에서 필터링되거나 제거될 수 있습니다. 특히 <script> 태그는 dangerouslySetInnerHTML로 삽입하더라도 대부분의 브라우저에서 실행되지 않거나 제거될 수 있습니다.

3. React의 제한사항

React는 dangerouslySetInnerHTML을 사용할 때 특정 태그나 속성을 자동으로 필터링하지는 않지만, JSX에서 특정 태그가 올바르게 처리되지 않을 수 있습니다. HTML5에서 지원되지 않는 태그나 속성은 JSX에서 경고를 발생시키고 렌더링되지 않을 수 있습니다.

4. 서버-사이드 렌더링(SSR)과 클라이언트-사이드 렌더링(CSR) 간의 불일치

SSR에서 렌더링된 HTML과 CSR에서 렌더링된 HTML이 일치하지 않을 경우, React는 클라이언트 측에서 다시 렌더링을 시도하며 이 과정에서 태그가 생략되거나 변경될 수 있습니다.

문제 상황

dangerouslySetInnerHTML 내부에 들어가는 데이터가 다음과 같을 때 문제가 발생할 수 있습니다:

<p>12124124<dt>1234</dt>1241241<p>

<dt> 태그는 <p> 태그 안에 올 수 없는 태그이기 때문에, 실제 브라우저에 나타나는 요소는 다음과 같았습니다:

<p>12124124</p><dt>1234</dt>1241241

이로 인해 뒤쪽에 위치한 글자들은 스타일이 깨져 보이게 됩니다.

해결 방법

<p>12124124<span>1234</span>1241241<p>

<dt> 태그를 <span> 태그로 변경하여 문제를 해결했습니다:

결론

dangerouslySetInnerHTML을 사용할 때는 삽입할 HTML의 구조가 올바른지 확인하는 것이 중요합니다. 태그가 잘못된 위치에 있을 경우, 브라우저가 이를 수정하면서 의도치 않은 결과를 초래할 수 있습니다. HTML 구조를 검토하고 필요한 경우 적절한 태그로 변경하는 것이 좋습니다.