dangerouslySetInnerHTML과 children 충돌

콘솔에 에러가 발생합니다. 버그를 찾으세요:

JSX

function RichContent({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }}>
      <p>추가 텍스트</p>
    </div>
  );
}

답변

dangerouslySetInnerHTML과 children을 동시에 사용할 수 없음 dangerouslySetInnerHTML의 속성명이 __html이 아니라 html이어야 함 div 대신 span을 사용해야 함 htmlContent를 그대로 전달하면 XSS 취약점이 발생함

로그인 후 제출하기