인프런 커뮤니티 질문&답변
작성한 질문수
캐리지 리턴 관련 문의 드립니다
작성
·
152
0
안녕하세요. 수차례에 걸쳐서 강의를 반복해서 듣고 있습니다.
캐리지 리턴 관련 질문 드립니다.
상품상세에서 description(상품설명)이 있는데 문자열의 캐리지 리턴을 <br />로 바꾸어서 화면에 출력을 하면 화면에는 <br />을 포함한 아래와 같은 문자열로 표시 됩니다.
확인 부탁 드리겠습니다.
Descriptionプラセンタ配合のエイジングケアトニック！<br />ジェットスプレーが直撃！頭皮と毛髪をトータルケア<br />※年齢に応じた栄養補給によるケア<br /><br />アルコールを含む
※제가 예전에 AWS관련 질문을 드렸는데 알기 쉽게 쓸려고 몇번을 지우고 다시쓰고 했는데 지웠던 질문에 대한 답변을 주신것 같습니다
번거로우시겠지만 다시한번 확인 부탁 드릴께요
답변 1
1
안녕하세요 늦은 답변 죄송합니다 !!!
리액트에서는 렌더링 내부에서 <br /> 같은 html 태그가 담겨있는 string 형태를 렌더링 하면, 문자열 그대로 렌더링하게 됩니다.
이 부분은 cross-site scripting(XSS) 공격을 막기 위해서 인데요...
그래서 만약 저렇게 html 태그를 렌더링 내부에서 사용하기를 원하신다면 아래와 같이 사용하셔야 합니다.
<div dangerouslySetInnerHTML={{ __html: 코드 }} > </div>
로 해주시면 됩니다.
만약 dangerouslySetInnerHTML을 쓰기 싫으면 <br /> 대신에 \n을 쓰신 후에
{ 코드.split('\n').map( 한줄 => { return (<span> {한줄}</span>)})}
이런식으로 해주셔도 될 것 같습니다. 감사합니다.!
질문을 하면 꼭 답변을 주신다는 신뢰가 있어서 마음이 든든합니다.ㅋㅋㅋ