React | \n으로 받은 string data를 <br/> 처리하여 줄바꿈하기

string 형식의 데이터를 JSX문법으로 렌더링 할 때 제목, 날짜 등 한 줄짜리 string은 문제없이 출력이 된다. 그렇지만 본문의 내용이든지, 채팅할 때 줄 바꿈 처리는 어떻게 렌더링 해야 할까?

 

JSX문법은 \n 을 줄바꿈으로 읽지 않고 string 형식으로 그대로 출력을 한다. 불러오는 데이터 자체가 문자열이니 \n 을 줄바꿈의 표시라고 읽는것도 말이 안되는 것 같기도 ... 🧐

---

🍋 받아오는 데이터 형식

react에서는 수많은 데이터의 양으로 반복되는 부분을 줄이기 위해 데이터 파일을 따로 만들어 map을 사용하여 불필요한 코드를 줄여준다.

[
  {
    id: 1,
    title: '첫번째 글',
    date: '2022-01-01',
    main: '새해입니다!\n모두모두 건강하세요.',
  },
  {
    id: 2,
    title: '인사드려요',
    date: '2022-02-24',
    main: '안녕하세요\n\n이것은 줄바꿈입니다\n헬로헬로',
  },
  {
    id: 3,
    title: '생일축하문구',
    date: '2022-04-16',
    main: '생\n일\n축\n하\n해',
  },
];

 

🍋 구현 방법

띄어쓰기가 필요한 문구를 \n 을 포함한 string 형태로 받아온다면,  데이터 전체 배열의 map 안에 \n을 기준으로 split 하여 또 다른 배열을 생성하고, map을 사용하여 띄어쓰기를 구현해줄 수 있다.

배열[0] (첫번째문장) + <br/>
배열[1] (두번째문장) + <br/>
배열[2] (세번째문장) + <br/>

 

id값이 2인 main의 문자열로 예를 들어보겠다.

 main: '안녕하세요\n\n이것은 줄바꿈입니다\n헬로헬로'

{main.split('\n').map(line => {
              return (
                <>
                  {line}
                  <br />
                </>
              );
            })}

 

---

🍋 결과 화면