React - 저장된 데이터 불러올 때 개행처리

TextArea 작성 데이터

 

데이터 출력 결과

• 출력 결과를 확인하였을 때 줄바꿈이 반영되지 않았다..
• DB 저장시 \n 과 함께 저장이 되는데, React에서는 텍스트 형태로만 랜더링하게 설정되어 있다고 한다.

 

개행처리

방법 1

<div className='memo'>{info.memo.split("\\n").map((line) => {
    return (
        <span>{line}<br/></span>
    )
})}
</div>

• 받아온 데이터에 \n을 기준으로 나누어 <br/>태그를 추가하여 개행 처리를 해준다.

방법 2

.memo {
	white-space: pre-line;
}

• white-space 스타일을 사용한다.
  • normal : HTML의 기본 값으로 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 wrap 된다.
  • nowrap : normal과 같은데 긴행이 wrap 되지 않는다. 글을 포함한 컨테이너를 넘어서 표시된다.
  • pre : 여러개의 공백과 개행문자가 모두 표현된다. <pre> 태그와 같이 동작하며 긴 행은 개행문자에서만 개행이 되고, wrap 되지 않는다.
  • pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap 된다. 개행문자를 만나도 개행된다.
  • pre-wrap : 여러개의 공백과 개행문자가 모두 보존된다. 개행문자외 에서도 필요시 wrap 된다.

 

결과

• 방법 1, 방법 2 모두 같은 결과로 나온다! 👍🏻 👍🏻 👍🏻