728x90
<span>{'안녕하세요\n나는\n개발하는 리트리버 입니다.'}</span>

 

위 코드를 돌리면 어떤 결과가 나올까? 줄바꿈 되지 않은 채로 출력된다.

"안녕하세요 나는 개발하는 리트리버 입니다."

개발중에 console 이나 alert 등에 사용하면 원하는 줄바꿈 값을 얻을 수 있지만, DOM에서 렌더링 될때는 우리가 원하는 기능을 하지 못한다. HTML이 '\n'을 줄바꿈으로 해석하지 않기 때문에 단순하게 띄어쓰기로 대체된다. (혹은 무시로..)

물론 \n을 사용하지 않고 줄바꿈을 할 수 있다면 좋다. 태그를 아예 다르게 쓰거나 해서 아예 다른 컴포넌트로 렌더링 되게끔 한다면 간단하다. 하지만 가끔 그렇게 사용하기 난감한 상황들이 좀 있다. map 함수로 배열값을 <li> 로 렌더링 되게끔 구성된 컴포넌트가 있다고 생각해보자.

const =['안녕', '이런\n저런']

LIST.map((item) => <li>{item}<.li>)

 

이렇게 되면 이런과 저런 사이에 줄바꿈을 넣기위해서 컴포넌트를 분리한다던가 하는 방법은 애매해져 버린다.

이럴때 두 가지 방법을 사용할 수 있다.

 

<pre> 사용하기

pre 태그는 preformatted text 태그로, HTML에 표시된 텍스트 그대로를 표시하고자 할때 사용되는 태그이다. 따라서 줄바꿈 뿐만 아니라 탭, 스페이스 등의 텍스트 상태를 있는 그대로 보여준다. 

LIST.map((item) => <li><pre>{item}</pre><.li>)

 

Input (pre 태그 예시)

<pre>
  This is a line of text.
    This line is indented with spaces.
  This line
  has line breaks.
</pre>

 

Output

This is a line of text.
    This line is indented with spaces.
 This line
 has line breaks.

 

white-space: pre-wrap 사용하기

css를 이용해서도 처리할 수 있다. white-space는 여백을 어떻게 처리하는가에 대해 다룬다. 여기서 pre-wrap 설정을 해주면

pre 태그와 같은 기능을 한다고 볼 수 있다. pre 라고만 설정해도 된다. pre-wrap과 pre 의 차이는, 글이 부모 사이즈를 넘어갔을때 줄을 바꿀지 (pre-wrap) 아니면 넘어갈지(pre)를 정해준다. 보통.. pre-wrap이겠죠?

 

728x90

+ Recent posts