[React]React.js에서 JSX 없이 HTML 엔티티 렌더링 문제 해결하기

React.js에서 JSX 없이 HTML 엔티티 렌더링 문제 해결하기

React.js를 사용하다보면 JSX 없이 HTML 엔티티를 렌더링해야 하는 상황에 직면할 수 있습니다. 그러나 엔티티가 제대로 표시되지 않는 문제가 발생할 수 있습니다. 이 블로그 포스트에서는 React.js에서 JSX 없이 HTML 엔티티 렌더링 문제를 해결하기 위한 해결책과 트러블슈팅 방법에 대해 알아보겠습니다.

문제점

다음 코드 스니펫을 사용하여 문제를 설명해보겠습니다:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"
  ),
  document.getElementById('container')
);

위의 코드에서 우리는 HTML 엔티티 × (곱하기 기호, ×)를 사용하여 닫기 버튼을 렌더링하려고 합니다. 그러나 원하는 기호 대신 출력은 문자열 “×”로 표시됩니다

해결책

문제를 해결하기 위해 React에서 dangerouslySetInnerHTML 속성을 사용할 수 있습니다. 이름이 위험하게 들릴 수 있지만, 제대로 처리될 때 안전하게 사용할 수 있습니다. 다음은 업데이트된 코드 스니펫입니다:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close", "dangerouslySetInnerHTML": {__html: "×"}},
    null
  ),
  document.getElementById('container')
);

dangerouslySetInnerHTML 속성을 사용하여 원하는 HTML 엔티티를 전달하면 React가 정상적으로 렌더링합니다.

대체 방법

dangerouslySetInnerHTML 속성을 사용하는 것에 주의가 필요하여 대체 방법을 찾고자 한다면 다음 두 가지 대안을 고려해볼 수 있습니다:

1. 이스케이프한 유니코드 코드 포인트 사용:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "\u00D7"
  ),
  document.getElementById('container')
);

곱하기 기호(유니코드 U+00D7)에 해당하는 유니코드 코드 포인트를 사용하면 React가 엔티티를 올바르게 렌더링합니다.

2. 리터럴 문자 사용:

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"
  ),
  document.getElementById('container')
);

이 방법에서는 원하는 HTML 엔티티로 리터럴 문자 “×”를 사용하면 React가 올바르게 처리하여 렌더링합니다.

결론

React.js에서 JSX 없이 HTML 엔티티를 렌더링하는 도중 문제가 발생하면 사용 가능한 해결책을 알고 있어야 합니다. dangerouslySetInnerHTML 속성을 사용하거나 이스케이프된 유니코드 코드 포인트 또는 리터럴 문자를 활용함으로써 원하는 HTML 엔티티를 성공적으로 렌더링할 수 있습니다.

다만, dangerouslySetInnerHTML의 사용은 신중하게 처리하고 필요할 때에만 사용하는 것이 중요합니다. 이스케이프된 유니코드 코드 포인트나 리터럴 문자를 사용하는 것은 더 안전한 대안입니다.

더 자세한 내용은 JSX in-depth 문서를 참조하시기 바랍니다.

reference : 

Stack Overflow – Where Developers Learn, Share, & Build Careers

Stack Overflow | The World’s Largest Online Community for Developers