프로젝트를 개발하면서, PDF 파일을 HTML로 변환 한 후 도움말을 넣는 경우가 생겼습니다.
React에서 HTML 파일 도움말을 넣는 방법에 대해 공유하고자 합니다.
dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 아래는 예시입니다.
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
저같은 경우는 도움말 기능을 넣어야 하기 때문에,
PDF에서 HTML로 파일을 변환 후 ..
그 HTML 파일을 직접적으로 불러오고 싶었는데, 시간적 여유가 없어 일단 임시방편으로
class HelperPage extends React.Component {
constructor() {
super();
this.iframeHelpPage = () => {
return {
__html: HelpHTMLObject,
}
}
}
render () {
return (
<div dangerouslySetInnerHTML={this.iframeHelpPage()} />
);
}
}
의 느낌으로 했습니다.
처음에는 HTML 자체를 불러오고 싶어
__html: `<iframe width="90%" height="900px" src="./Help.html" ></iframe>`
식으로 사용해 봤지만, react에서 html 자체를 불러오지 못하더라구요,,
그래서 help.html의 소스를 객체화 해서 HelpHTMLObject 라는 걸 불러와서 사용하고 있습니다.
임시방편이기때문에, 좀더 조사를 한 후 공유해 드리도록 하겠습니다 !..