[React] json 형식 데이터 줄바꿈 적용하기 (split)

들어가며

---

게시판이나 댓글에 글을 쓸 때 엔터를 사용하여 줄바꿈을 한다.

REST API를 통해서 JSON 문자열로 데이터를 저장하면 엔터가 적용이 안될 때가 있다.

저장한 데이터를 VIEW창에 불러올 때 엔터를 적용하는 방법을 알아보자.

 

 

새 노트 추가 페이지에서 위와 같이 작성하고 저장한 후, 데이터를 확인해보자.

 

데이터에는 위와 같이 "/n"이 포함되어 있는 것을 확인할 수 있다.

데이터를 map메서드로 가져올 때 content 부분은 split메서드를 사용하여 "/n"부분을 구분자로 나눠준다.

구분자는 끊어야할 부분을 말한다. 

 

<p>{item.content?.split("/n").map((it, idx)=>(
                        <span key={idx}>
                            {it}
                            <br/>
                        </span>
                    ))}</p>

위의 코드처럼 텍스트가 쭉 나열되다가 /n이 나오는 순간 map이 한번 끊고, 새로운 span으로 내용을 마저 불러도록 작성한다. 

 

view 페이지 결과 / 개발자 모드 코드 결과