React 또는 Vue 구성 요소에서 텍스트를 렌더링할 때 줄 바꿈이 작동하도록 합니다.

때로는 React 구성 요소(예: CMS 또는 API)에서 제어할 수 없는 문자열을 얻을 수 있습니다. 다음과 같이 보일 수 있습니다.

"Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

그러나 이러한 작은\n 문자는 다음과 같이 React(또는 Vue) 구성 요소에 넣는 경우 존중되지 않습니다.

const haiku = "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

function BeautifulHaiku() {
  return <div>{haiku}</div>
}

이 동작을 변경하고 원하는 줄 바꿈을 얻으려면 몇 가지 확실한 옵션이 있습니다.

\n을 <br />로 교체

가장 먼저 할 수 있는 일은 문자열을 분할한 다음 결과<br /> 태그를 렌더링하는 것입니다.

function replaceWithBr() {
  return haiku.replace(/\n/g, "<br />")
}

React에서는 dangerouslySetInnerHTML를 사용하여 작동하도록 합니다.

<p dangerouslySetInnerHTML={{__html: replaceWithBr()}} />

(이것은 "위험한"이유가 있습니다. React 팀이 멋져 보이기를 원해서가 아니라 악의적인 스크립트를 피하기 위해 거기에 무엇을 넣을지 주의해야 하기 때문입니다.)

그리고 Vue에서는 v-html를 사용하여 작동하도록 합니다.

<p v-html="replaceWithBr()">{{haiku}}</p>

CSS 공백 사용

이를 수행할 수 있는 다른 방법은 white-space CSS 속성을 사용하고 pre-wrap 또는 pre-line 로 설정하는 것입니다.

.css-fix {
  white-space: pre-wrap; /* or pre-line */
}

이 두 가지는 내용에 줄 바꿈이 있을 때 텍스트가 줄바꿈되도록 하고 pre-line 특히 여러 공백을 하나로 축소합니다.

이것은 React와 Vue 모두에 적용될 수 있습니다!

증명해봐, 캐시디

좋아, 내 팔을 비틀어!

작동 중인 React 예제는 다음과 같습니다.


그리고 여기 Vue 예제가 있습니다!

"They're different but they're friends" - DJ Khaled

전체 공개: 저는 Vue 개발자가 아닙니다. 이것은 제가 시도했을 때 저에게 효과가 있었습니다. 나는 이것이 React에서 "적절하다"는 것을 알고 있지만 나는 멍청하기 때문에 Vue에 대해 말할 수 없습니다. 행운을 빕니다, 즐겁게 지내고, 좋은 선택을 하고, 친절하고, 코드를 작성하세요.

도움이 되었기를 바랍니다.