[React] innerHTML & 동적으로 HTML 코드 추가하는 방법

Intro

react 에서 동적으로 HTML 코드를 추가하는 방법에 대해 알아보도록 하겠습니다. 이를 위해 한 예시로 

 

"message" : "No: 1, 2\nHello World!"

 

해당 text 에서 \n 를 실제 태그로 바꿔야 한다고 합시다. 

import "./App.css";

function App() {
  const message = "No: 1, 2\nHello World!";

  return (
    <div className="App">
      <br />
      <div>{message}</div>
      <br />
    </div>
  );
}

export default App;

현재는 다음과 같이 출력되고 있습니다. 

 

How to 

react 에서는 텍스트로 된 HTML 코드를 추가하고 싶은 경우에는 react의 규칙을 사용해야 합니다.

 

dangerouslySetInnerHTML={{ __html: htmlCode }}

 

import "./App.css";

function App() {
  const message = "No: 1, 2\nHello World!";
  const transform = (str) => {
    return str.replace(/\n/g, "<br/>");
  };

  return (
    <div className="App">
      <br />
      <div dangerouslySetInnerHTML={{ __html: transform(message) }}></div>
      <br />
    </div>
  );
}

export default App;

<br/> 태그가 잘 적용되어 출력되고 있는 모습을 확인할 수 있습니다.