[React] String to Html 렌더링

 

import React from "react";

class App extends React.Component {
  render(){
      let html = "<u>Hello, World</u>";
      
      return (
          <div>
              <p>
                  그냥 넣는 경우<br/>
                  {html}
              </p>
              <br/>
              <p>
                  dangerouslySetInnerHTML을 적용한 경우<br/>
                  <span dangerouslySetInnerHTML={{ __html:html }} />
              </p>
          </div>
      )
  }
}

export default App;

 React에서는 XSS 공격을 막기 위해 일반적으로 사용되는 {} 형태의 렌더링 시에 HTML을 단순 텍스트 형태로만 출력합니다. 때문에, <span> 태그에 사용된 것처럼 dangerouslySetInnerHTML를 활용해줘야 html 태그를 적용하여 표현해 줄 수 있습니다.

 

 이는 db에서 불러오는 html형태의 태그를 불러올 때 활용가능하며, span 대신에 다른 element를 활용해도 상관없습니다.