JSON 데이터로 개행처리할 때 트러블 슈팅

1. 문제 상황 발생

json 데이터를 받아와서 뿌려줄 때, 개행 문자가 처리가 되는 부분과 안되는 부분이 있었다.

const [data, setData] = useState<string>('');

const GetData = () => {
/** 비동기 데이터 받아오는 곳 */
 .then((response) => {
	 setData(response.data..replace(/\n/g, '<br>').replace(/ /g, '&nbsp;'))
 }
}

2. 원인 추론

데이터가 JSON 문자열로 인코딩될 때 개행 문자가 JSON 규격에 맞춰 이스케이프 처리가 되면서,

JSON 데이터 내의 문자열에서 개행 문자가 이스케이프되지 않은 경우도 있을 수 있습니다.

예를 들어, 문자열 데이터가 그대로 JSON으로 변환되면서 개행 문자가 그대로 포함될 수 있기때문. 이는 데이터의 원래 형식과 변환 방식에 따라 다르게 처리해야될 듯 하다. 이를 해결하기 위해선 모든 개행 문자를 <br> 태그로 변환하는 방법을 사용해야될 듯 하다.

3. 해결 방안

개행 처리 함수 제작

import { useState, useEffect } from 'react';

const dataForDisplay = (data: any): string => {
  // 문자열 처리
  if (typeof data === 'string') {
    return data
      .replace(/\\n/g, '<br>') // `\\n`을 `<br>`로 변환
      .replace(/\n/g, '<br>')  // `\n`을 `<br>`로 변환
      .replace(/ /g, '&nbsp;'); // 공백을 `&nbsp;`로 변환
  }

  // 배열 처리
  if (Array.isArray(data)) {
    return data.map(dataForDisplay).join('<br>'); // 배열 요소를 재귀적으로 처리
  }

  // 객체 처리
  if (typeof data === 'object' && data !== null) {
    const processedObject = Object.entries(data).reduce((acc, [key, value]) => {
      acc[key] = dataForDisplay(value); // 객체 값도 재귀적으로 처리
      return acc;
    }, {} as Record<string, any>);
    return JSON.stringify(processedObject, null, 2) // JSON 형태 유지
      .replace(/\\n/g, '<br>')
      .replace(/\n/g, '<br>')
      .replace(/ /g, '&nbsp;'); // 변환 적용
  }

  // 기타 타입 처리
  return String(data)
    .replace(/\\n/g, '<br>')
    .replace(/\n/g, '<br>')
    .replace(/ /g, '&nbsp;'); // 기본 변환
};

데이터 처리 (개행처리 함수 적용)

const GetDataComponent = () => {
  const [data, setData]  = useState<string>('');

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data'); // 데이터 API 호출
      const responseData = await response.json();

      // 데이터 가공 및 상태 설정
      setData(dataForDisplay(responseData));
    } catch (error) {
      console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
    }
  };
  

마크업 태그에 적용

 return (
    <div>
      <h3>데이터 보여줘요.</h3>
      <div>{dataForDisplay(data)}</div>
    </div>
  );

data 문자열 데이터 내 모든 개행 문자(\n 및 \n)를
태그로 변환하여, 개행 문자가 화면에 올바르게 렌더링되도록 처리했습니다.

4. 결과 확인

보안상의 문제로 화면을 띄울 순 없지만
개행처리가 잘 되는 것으로 확인했다.