제목: Wrapper Div 없이 dangerouslySetInnerHTML 사용 문제 해결하기
API에서 받은 HTML 콘텐츠를 처리해야 할 때, React 애플리케이션에서 dangerouslySetInnerHTML을 사용해야 할 필요가 있을 수 있습니다. 이 방법은 권장되는 접근법이지만, 때로는 스타일링에 문제가 발생할 수 있으며 특히 CSS 그리드를 사용할 때 영향을 줄 수 있습니다.
일반적으로 다음과 같은 마크업을 가지고 있을 수 있습니다:
<article>
<h2>포스트 제목</h2>
<small>포스트 날짜</small>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
이 예제의 <article> 태그에는 display: grid 스타일이 적용되어 있습니다. 그러나 dangerouslySetInnerHTML로 생성된 <div>는 일부 스타일링에 문제를 일으키고 불필요한 공간을 차지하여 효과적으로 스타일을 적용하기 어렵게 만듭니다. 핵심 내용은 유지하면서 이 div를 제거할 방법이 있는지 궁금할 수 있습니다.
솔루션 1: 사용자 정의 HTML 마크업 생성
이 문제를 해결하기 위한 한 가지 방법은 직접 HTML 문자열을 구성하고 dangerouslySetInnerHTML을 사용하여 전달하는 것입니다. 이 접근법은 GraphQL 쿼리의 다른 부분을 병합하여 원하는 HTML 마크업을 형성할 수 있게 해줍니다.
const createFullPostMarkup = () => {
return { __html: `
<h2>포스트 제목</h2>
<small>포스트 날짜</small>
${post.html}
` };
};
<article dangerouslySetInnerHTML={createFullPostMarkup()} />
dangerouslySetInnerHTML에 할당된 값은 반드시 원하는 HTML 문자열을 포함한 __html 키를 가진 객체여야 합니다. 이 접근법은 더 많은 유연성을 제공하며, 원하는 내용을 문자열 내에 포함시킬 수 있습니다.
솔루션 2: LoadCSSFile을 사용한 React 해킹
첫 번째 솔루션으로 모든 요구 사항을 충족시킬 수 없는 경우, 대체로 LoadCSSFile을 사용한 대안적인 접근법을 고려할 수 있습니다. 이 솔루션은 약간 무식한 해결책이지만, React가 단편에 대해 dangerouslySetInnerHTML을 지원할 때까지 작동할 수 있습니다.
const LoadCSSFile = ({ fontUrl }) => {
let linkStr = '</style>';
linkStr += `<link rel="preload" href="${fontUrl}" as="style" onload="this.rel='stylesheet'" />`;
linkStr += `<noscript><link rel="stylesheet" href="${fontUrl}" /></noscript>`;
linkStr += '<style>';
return <style dangerouslySetInnerHTML={{ __html: linkStr }} />;
};
LoadCSSFile 컴포넌트는 원하는 HTML 문자열을 직접 구축함으로써 React의 dangerouslySetInnerHTML에 대한 강제 래퍼를 우회합니다. 이것은 가장 우아한 해결책은 아니지만, 요구 사항을 효과적으로 해결할 수 있습니다.
이러한 접근법 중 하나를 구현함으로써 API에서 얻은 HTML 콘텐츠의 원치 않는 <div> 래퍼 없이 dangerouslySetInnerHTML을 사용할 수 있으며, 원하는 스타일링을 달성할 수 있습니다.
더 자세한 토론과 대안적인 접근법은 React 문서와 관련된 개방형 기능 요청을 참조할 수 있습니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
