[React] JSX에서 '\n' 이 줄바꿈되지 않을 때

Yeong·2024년 9월 13일

'♡\n♡♡\n♡♡♡'이라는 문자열을 반환하는 함수의 값을 리엑트에서 렌더링했을 때, 기대와는 다른 값이 출력되었다.

출력된 결과
♡ ♡♡ ♡♡♡ ♡♡♡♡

기대한 값
♡
♡♡
♡♡♡
♡♡♡♡

원인

React는 \n 을 개행(행을 바꿈)하지 않고 공백으로 처리한다.

\n 대신 `<br />`로 변경하면?

React에서는 Cross-site scripting XSS 공격을 막기 위해 값에 html 태그가 포함되어있는 경우에도 문자열로 인식한다.
즉, \n을 <br /> 로 변경하면 화면에 그대로 출력된다.

// 화면에 보이는 값
♡<br>♡♡<br>♡♡♡<br>♡♡♡♡

해결방법1 : map()

함수의 반환값인 문자열을 배열로 변환한다.
-> split('\n')

배열 상태의 값에 map 을 사용한다.
-> 배열 형태의 JSX로 변환하여 렌더링

function App() {
  // printHearts의 반환값을 배열로 변경
  const heartLists =printHearts(inputValue).split('\n');
  
  return (
        <ul>
          {heartLists.map(el => {
            return <li key={el + Math.random()}>{el}</li>;
          })}
        </ul>
  );
}

해결방법2: css 'white-space'속성 추가

JSX 내부에 \n 을 <br>로 변경
css에 white-space: pre-wrap; 추가
white-space : 공백 문자 처리 방법 제어

div{
  white-space: pre-wrap;
}

function getWeather() {
  if (tc < 5) {
      return `날씨가 많이 덥습니다. \n 민소매나 얇은 반팔, 반바지를 적극 권장드립니다.\n 태양이 뜨거우니 얇은 흰티를 걸치시는 것을 추천드려요. \n추천 의류 : 얇은 셔츠, 얇은 반팔과 민소매`;
      }
}

사용해보았을 때 css에 속성을 추가하는 방법이 가장 편한 것 같다.