Dev Diary 💻

Intro 안녕하세요. 리액트에서 innerHtml을 표시하는 방법에 대해 알아보겠습니다. 최근에 스마트에디터 관련한 작업을 진행하고 있었습니다. 에디터에 저장된 내용이 그대로 html tag로 저장되고, 저장된 html tag를 그대로 화면에 표시해야 했죠. 저장된 이 innerHtml를 어떻게 표시해야 할까요? 함께 알아봅시다 :) How to solve the problem React에서 innerHtml를 표시하는 위해서는 아래 코드와 같이 dangerouslySetInnerHTML를 활용할 수 있습니다. import React from 'react'; function MyComponent() { const sampleHtml = 'Hello world! '; return ( ); } 여기서 da..

Intro react 에서 동적으로 HTML 코드를 추가하는 방법에 대해 알아보도록 하겠습니다. 이를 위해 한 예시로 "message" : "No: 1, 2\nHello World!" 해당 text 에서 \n 를 실제 태그로 바꿔야 한다고 합시다. import "./App.css"; function App() { const message = "No: 1, 2\nHello World!"; return ( {message} ); } export default App; 현재는 다음과 같이 출력되고 있습니다. How to react 에서는 텍스트로 된 HTML 코드를 추가하고 싶은 경우에는 react의 규칙을 사용해야 합니다. dangerouslySetInnerHTML={{ __html: htmlCode }} ..