데이터를 가져오는데 이런식으로 html 요소를 가지고 와서 어떻게 해결할지 고민을 하게 되었다.
검색을 하다보니 dangerouslySetInnerHTML
를 사용해서 React에서 innerHTML
을 제대로 가지고 오는 방법을 찾았다.
dangerouslySetInnerHTML는 브라우저 DOM에서 innerHTML
을 사용하기 위한 React의 대체 방법입니다.
일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅(XSS) 공격에 쉽게 노출될 수 있기 때문에 위험합니다.
React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML
를 작성하고 __html
키로 객체를 전달하여 사용할 수 있다.
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
그래서 코드 구현을 아래 코드에서
<span>{book.volumeInfo.description}</span>
이렇게 변경 했다.
<span dangerouslySetInnerHTML={{ __html: book.volumeInfo.description }}></span>
코드 변경 이후 보여지는 결과물
하지만 이름이 dangerouslySetInnerHTML
인 만큼 코드에서 HTML
을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출 되기 때문인지 위험해 보인다.