react-html-parser로 줄내림반영

react-html-parser로 줄내림반영

react-html-parser는 HTML 문자열을 React 요소로 변환하는데 사용되는 라이브러리이다. react-html-parser는 API에서 받은 HTML 문자열을 안전하게 렌더링하거나, 서버에서 렌더링한 HTML을 클라이언트로 전송하여 이를 React에서 사용할 수 있도록 도와준다.

 

줄바꿈을 반영하려면 html에서는 <br/>과 \n을 이용하지만 리액트에서는 \n이 줄바꿈이 아닌 문자열로 렌더링된다.

react-html-parser를 사용하면 리액트에서도 \n이 줄바꿈으로 적용된다.

 

또한 react-html-parser를 이용하면 위험한 dangerouslySetInnterHTML를 사용하지 않고도, html요소로 변환할 수 있게 해준다.

dangerouslySetInnerHTML은 앱을 공격에 노출시킨다.

//https://www.npmjs.com/package/react-html-parser에 적혀있는 사용법

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

react-html-parser 사용 전

react-html-parser 사용전에는 줄바꿈이 적용되지 않는다.

console.log(poem.poem.text);
...
<div><p>{poem.poem.text}</p></div>

콘솔로그와 <p>태그에 반영된 모습

react-html-parser 사용 후

react-html-parser 를 사용하면 줄바꿈이 \n으로 변환된다. 이후에 데이터 string.split('\n') 을 통해 배열로 만든 후, p태그를 이용하여 줄내림을 반영했다.

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
// ..(생략)..
let htmlText;

// react-html-parser를 사용하면 줄바꿈이 \n으로 변환된다
console.log('리액트html파서',ReactHtmlParser(poem.poem.text))

    if (poem.poem.text) {
      htmlText = (ReactHtmlParser(poem.poem.text)[0] as unknown as string).split("\n");
    }
    
 console.log('데이터정제후',htmlText);
 
<div>
  {htmlText?.map((el, i) => (
    <p key={i}>{el}</p>
  ))}
</div>

콘솔로그와 <p>태그에 반영된 모습

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.