인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

kium님의 프로필 이미지
kium

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

캐리지 리턴 관련 문의 드립니다

작성

·

150

0

안녕하세요. 수차례에 걸쳐서 강의를 반복해서 듣고 있습니다.

캐리지 리턴 관련 질문 드립니다.
상품상세에서 description(상품설명)이 있는데 문자열의 캐리지  리턴을 <br />로 바꾸어서 화면에 출력을 하면 화면에는 <br />을 포함한 아래와 같은 문자열로 표시 됩니다.
확인 부탁 드리겠습니다.  

Descriptionプラセンタ配合のエイジングケアトニック!<br />ジェットスプレーが直撃!頭皮と毛髪をトータルケア<br />※年齢に応じた栄養補給によるケア<br /><br />アルコールを含む

※제가 예전에 AWS관련 질문을 드렸는데 알기 쉽게 쓸려고 몇번을 지우고 다시쓰고 했는데 지웠던 질문에 대한 답변을 주신것 같습니다
번거로우시겠지만 다시한번 확인 부탁 드릴께요

답변 1

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 늦은 답변 죄송합니다 !!! 

리액트에서는   렌더링 내부에서  <br /> 같은 html 태그가 담겨있는 string 형태를 렌더링 하면,    문자열 그대로 렌더링하게 됩니다. 
이 부분은 cross-site scripting(XSS) 공격을 막기 위해서 인데요... 

그래서 만약 저렇게 html 태그를 렌더링 내부에서 사용하기를 원하신다면 아래와 같이 사용하셔야 합니다. 

<div dangerouslySetInnerHTML={{  __html: 코드  }} > </div> 

로 해주시면 됩니다.  


만약 dangerouslySetInnerHTML을 쓰기 싫으면   <br /> 대신에  \n을 쓰신 후에 

{ 코드.split('\n').map( 한줄 =>  { return (<span> {한줄}</span>)})}

이런식으로 해주셔도 될 것 같습니다. 감사합니다.!

kium님의 프로필 이미지
kium
질문자

질문을 하면 꼭 답변을 주신다는 신뢰가 있어서 마음이 든든합니다.ㅋㅋㅋ

kium님의 프로필 이미지
kium

작성한 질문수

질문하기