[React+StyledComponent] textarea의 줄바꿈(개행) 및 띄어쓰기(공백) 처리하기

문제 상황

 

textarea에서 줄바꿈 및 띄어쓰기를 여러번 한 경우, 저장할 때 이런 개행과 공백이 제대로 반영이 되지않는 이슈가 발생했다. 기본적으로 HTML은 연속된 공백 문자를 하나의 공백으로 처리하고, 줄바꿈 문자를 무시하기 때문에 여러 개의 공백과 줄바꿈이 포함된 문자열을 그대로 출력하면 모두 사라진다고 한다. 

 

 

해결 방법

HTML에서 줄바꿈과 공백이 그대로 보이지 않는 문제에 대한 해결방법은 다음과 같다.

• 공백과 개행문자를  와 <br/> 등으로 치환하여 보여준다.
• 출력 자체를 textarea에 한다.
• <pre> 태그를 사용히여 보여준다.
• CSS의 white-space 속성을 사용하여 보여준다.

 

• white-space 속성값

	wrap	\n (개행, 줄바꿈)	여러개의 공백
normal	길이가 긴 행이 필요시 wrap	무시됨	하나로 표시
nowrap	X	무시됨	하나로 표시
pre	X	표현됨	모두 표현됨
pre-line	길이가 긴 행이 필요시 wrap	표현됨	하나로 표시
pre-wrap	길이가 긴 행이 필요시 wrap	표현됨	모두 표현됨

 

이 중에서 나는 위의 white-space 속성을 줄바꿈과 여러개의 공백이 포함된 문자열을 렌더링해야 하는 요소에 사용하여 해결했다. 길이가 길어지면 wrap이 되어야 했고, 줄바꿈 및 여러개 공백 모두 포함되길 원했으므로 pre-wrap을 적용했다.

 

 

소스코드

import styled from "styled-components";
import { IPost } from "./timeline";

const Payload = styled.p`
  font-size: 16px;
  line-height: 20px;
  
  // 길이가 길어지면 wrap되고, 공백 및 줄바꿈을 모두 표현
  white-space: pre-wrap;
`;

export default function Post({ post }: IPost) {
  return (
	<Payload>{post}</Payload>
  );
}

 

 

결과

 

문제없이 입력한 그대로 저장되어 렌더링 된다.

---

참고

https://offbyone.tistory.com/326