<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이겠죠?
'Front-end' 카테고리의 다른 글
Warning: Extra attributes from the server: cz-shortcut-listen (1) | 2024.09.20 |
---|---|
[Form] React-hook-form 으로 form 컨트롤 하기 (0) | 2024.09.05 |
이미지 생성과 파비콘 만들기까지! (5) | 2024.08.29 |
[상태관리] zustand와 함께하는 상태관리 3, 페이지 새로고침에서 상태 유지하기 (0) | 2024.08.27 |
[상태관리] zustand와 함께하는 상태관리 2, Immer로 큰 상태의 객체 관리하기 (0) | 2024.08.22 |