리액트에서 string 형태의 HTML CODE 랜더링 방법
React 에서는 cross-site scripting (xss) 공격을
막기 위해 렌더링 메소드 내부에서 html 태그가 담겨있는
string 형태를 랜더링하면 태그가 안먹히고 문자열 그대로
랜더링됨.
이 방법을 해결하는 방법
<div dangerouslySetInnerHTML={ {__html: content} }>
</div>
이렇게 dangerouslySetInnerHTML 를 사용해주면 됨.
- 하지만 간단하게 저렇게 br 정도만 해결해주려는데
저렇게 해야할까? 더 간단한 방법이 있음.
{content.split("\n").map((line) => {
return (
<span>
{line}
<br />
</span>
);
})}
split 로 잘라내서 배열로 만든 후, .map 을 리턴시켜서
해결가능.
textarea 로 간단하게 사용자의 구매평이라든가 이런 내용을 인풋받아서 db 에 저장 후 불러올때 2번을 많이 사용하게 될 것
같다.
1번의 경우는 주로 wysiwyg 에디터내용을 가져와 쓸때
유용할 듯.
Author And Source
이 문제에 관하여(리액트에서 string 형태의 HTML CODE 랜더링 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@familyman80/리액트에서-string-형태의-HTML-CODE-랜더링-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)