React(리액트)에서 textarea 줄바꿈 표현하는 방법, splice/ map

textarea 줄 바꿈 표현하기

오늘 과제 view를 간단하게 작성하면서 생각해보지 못한 뜻밖에 문제를 발견했다.

바로 <textarea> 태그에 줄을 바꿔 입력해도 한 줄로 표시되는 문제었다.

 

 

알아본 바로는 textarea 값을 저장할 때 줄바꿈은 자동으로 \n으로 구분이 된다고 한다. 하지만 react에서는 (js전반적으로 그러는지는 확인하지 못했다) 이 \n을 처리하지 않고 한 줄로 출력이 된다.

 

그래서 해결한 방법이 splite, map을 이용한 수동 줄바꿈이다.

const text = "textarea로 받은 텍스트 값 저장"

return (
....
{
text.splite("\n").map(v=>{
    return(<span>{v} <br/> </span>
    }
}

코드는 간단했다. 중간에 껴있는 "\n"을 기준으로 splite하여 배열을 만들고 순회를 하면서 요소 사이사이 <br/>태그를 이용하여 줄바꿈을 실행했다.

이렇게 작성한 결과 줄바꿈이 정상으로 동작한다 !!

 

---

추가 내용 220610

 

다른 걸 찾다 발견했다. 바로 <pre>태그이다. 

<h1>
안녕하세요 
잘가요
<h1>
 >>>>>>>> 안녕하세요 잘가요 
 
<h1>
<pre> 
안녕하세요 
잘가요
</pre>
<h1>
>>>>>>>
안녕하세요
잘가요

h1으로 작성하면 줄바꿈을 공백으로만 구분할 수 있는 형태지만 <pre>태그로 감싸 작성한다면 있는 그대로를 보여준다.

 

다만 pre태그는 있는 그대로를 보여주기 때문에 글이 길어지면 스크롤로 보이는 속성이 있다

white-space: pre-wrap;

이 속성을 추가하여 자동으로 줄바꿈 할 수 있게 변경하자