[React] 리액트 내부에서 HTML을 호출

Jinwoo Choi·2023년 2월 3일
0

dangerouslySetInnerHTML 란?

프로젝트를 개발하면서, PDF 파일을 HTML로 변환 한 후 도움말을 넣는 경우가 생겼습니다.
React에서 HTML 파일 도움말을 넣는 방법에 대해 공유하고자 합니다.

리액트 Docs를 참고하자면,

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 라는 걸 불러와서 사용하고 있습니다.

임시방편이기때문에, 좀더 조사를 한 후 공유해 드리도록 하겠습니다 !..

profile
목표는 1일 1커밋..!

0개의 댓글