210910 개발기록: JSON 줄바꿈의 최고의 선택

https://junior-datalist.tistory.com/193

210908 개발기록: JSON 의 줄바꿈 문제

📌  <pre/> 태그를 사용한 JSON 개행의 한계

이 날은 <pre/> 태그를 사용하여 json 데이터의 개행을 적용할 수 있었다.

문제는 <pre/> 태그를 적용하면서 여러 사이드이펙트가 나타났는데 우선 div 내부 글자가, div 를 뚫고 나가기 시작했다.

autoflow 도 적용하고 별짓을 다했지만 남은건 처참히 div 를 뚫고 나간 글자들 뿐이었다..

 

pre 태그를 적용 후 발생한 문제라 더 이상 pre 태그를 사용하는 것이 정답이 아니라 생각했다.

다른 방법을 궁리해야했는데, 의외로 '정답'이 가까운 곳에 있었다.

 

 

✅ split('\n') 과 map(), <br/> 을 사용한 JSON 개행

1. 우선, 개행이 필요한 문자열은 JSON 내부에서 미리 '\n' 를 표시해준다.

2. JSON 문자열을 data 변수에 담아 JSX, TSX에서 split('\n') 함수 처리를 한다.

3. 그렇게 되면 개행이 필요한 지점을 기준으로 문자열이 나뉘어진 배열이 생성된다.

4. 해당 배열 각각의 원소를 map() 함수로 돌리고 내부에서 <br/> 태그를 사용하면, 개발자가 의도한 지점에서 깔끔하게 개행 처리가 된다.

 

data.split('\n').map(line => {
	return (<span>{line}<br/></span>)
	})