React dangerouslySetInnerHTML로 string 데이터 줄바꿈해서 보여주기

서버에서 넘어오는 string 데이터를 보여주는 화면이 있는데, 줄바꿈이 \n으로 되어 오고 있었다. 그런데 이 부분을 그대로 넣어줄 경우, HTML에서는 \n으로 줄바꿈 처리가 되지 않기 때문에, \n으로 된 부분을
태그로 치환해준뒤, HTML 마크업을 동적으로 생성해줘야 한다. 이때 사용되는 속성이 dangerouslySetInnerHTML이다.
https://ko.legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

const htmlMessage = data?.content?.replace(/\n/g, '<br/>');

 <div dangerouslySetInnerHTML={{ __html: htmlMessage }} />

사용법은 아주 간단하다. HTML 태그가 포함된 문자열을 __html 속성에 넣어 객체로 전달해주면 된다. 그러나 이름에 dangerously가 들어간 만큼 사이트 간 스크립팅 공격에 취약할 수 있으므로 신뢰할 수 있는 소스인지, 사용자 입력과 같은 민감한 정보가 포함되지 않도록 주의해야 한다.