Vue.js에서 줄바꿈 적용하기 :: 마이구미

이번 글은 Vue.js에서 텍스트 줄바꿈에 대해 다뤄본다.

이해를 위해 유튜브의 API를 통해 받아오는 데이터를 활용하는 예로 들어본다.

단순히, 유튜브 API를 통해 받아온 데이터를 출력해보자.

<div>{{ description }}</div>

그 결과, 아래와 같이 출력되는 모습을 볼 수 있다.

오른쪽 html 소스에서 보는 텍스트 구조와 실제로 출력되는 텍스트가 다른 모습을 확인할 수 있다.

즉, 줄바꿈이 적용되지 않은 모습을 볼 수 있다.

(사실 상 받아오는 텍스트는 아래와 같다.)

너 먹구름 비\n\n\n1. 널 너무 모르고\n작사: 헤이즈(Heize)\n작곡: 헤이즈(Heize), GroovyRoom..............

\n은 줄바꿈으로 많이 사용되지만, HTML에서 렌더링되지 않는다.

HTML에서는 Line Break 요소로 줄바꿈이 필요할 경우, br 태그를 사용한다.

\n 문자열을 <br> 태그로 바꾸어 주면 된다.

바꾸는 방법은 replace 또는 split를 활용하면 된다.

1. 정규식을 활용한 replace 메소드

description.replace(/(?:\r\n|\r|\n)/g, '<br />')

2. split를 통해 쪼갠 후, join통해 태그 추가

description.split('\n').join('<br />');

마지막으로, HTML 코드를 사용하기 위해서는 v-html 지시자(directive)를 사용해야한다.

단순히, {{}} 콧수염으로 출력하면 안된다.

왜냐하면, br 태그를 HTML 태그가 아닌 텍스트로 인지하기 때문에 줄바꿈이 적용되지 않는다.

<div v-html="description"></div>