문제해결

---

리액트로 프로젝트를 만들고 있었는데 ..

[문제발생]👩‍🔧

변수 txt 안에 텍스트를 넣고 화면상에 나타내고 싶어 만들고 있었다.

머릿속 상상으로는

이렇게 될거라 생각하고 변수를 만들었다.

1번

const txt = 'Joo<br/>Sehyeon<br/>www.nuyhes.com';

뭐야...🤷‍♀️ 안되잖아..? 예전에 snippets 을 생성하면서 줄바꿈 \n가 번뜩 떠올랐고 다시 도전..!

2번

const txt = 'Joo\nSehyeon\nwww.nuyhes.com';

음...... 구글링 하러 출발

---

해결방법

[참고] https://developer.mozilla.org/ko/docs/Web/CSS/white-space

CSS 상에서 white-space:pre-wrap을 설정을 하면된다고 나온다.

해당 css에서 해당 선택자에 white-space:pre-wrap을 하면된다고 한다.

예제

'해당태그선택자'{
    white-space: pre-line;
}

이렇게 지정하고 나면 <br/> 은 안됨! 하지만 \n 과 그냥 엔터(Enter)도 먹히게 된다.

결과