Dev/TIL

<br /> 태그를 엔터로 바꾸는 방법

cakey 2022. 4. 20. 00:28
반응형
const = '안녕하세요<br /> 반갑습니다 <br />저를 엔터로 바꿔주세요'

위와 같은 데이터를 엔터로 바꾸는 가장 쉬운 방법

 

1. CSS 사용

white-space: pre-wrap 을 사용한다.

 

2. 스크립트 사용

{data.split("\n").map((line) => {
    return (
      <span>
        {line}
        <br />
      </span>
    );
  })}

 

3. React를 사용할 경우 dangerouslySetInnerHTML 사용

<div dangerouslySetInnerHTML={ {__html: data} }>
	...
</div>

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

반응형