210908 개발기록: JSON 의 줄바꿈 문제

🌀  상황

JSON 객체로 받은 문장 내용을 개행(줄바꿈)하여 html(jsx)에 출력해야한다.

 

📌  문제

\n 이나 \\n , 심지어 <br/> 태그까지 JSON 문장에 넣어봤지만,  줄 바꿈 처리 없이 모두 한 줄로 출력됐다.

 

✅  해결

<pre/> 태그라는 것이 있다. preformatted tag 라는 뜻으로 <br/> 태그나 다른 처리 작업 없이 원하는 포맷으로 html 을 출력한다.

currentQuestion['title'] 은 JSON 객체에서 title 이란 key 로 문장을 받아온 값이다. 해당 값을 pre 태그 내부에 넣어주면 \n 이 제대로 먹히는 것을 확인할 수 있다.

...
   return (
           <div className="question-title">
                <pre>{currentQuestion['title']}</pre>
           </div>
	)

이렇게 개행이 된다. 그런데 뭔가 정렬이 예쁘지않아 다른 방법도 찾아봐야할 것 같다.