React에 JSON 표시

1. JSON.stringify() 메서드
2. HTML의 <pre> 태그
3. React에 JSON 표시

React에서 웹 애플리케이션을 구축할 때 외부 데이터를 수신하고 표시하는 것이 일반적입니다. JSON(JavaScript Object Notation)은 객체로 저장된 데이터를 공유하는 데 일반적으로 사용되는 형식입니다.

이 기사의 초점은 React에서 JSON 형식 데이터를 표시하는 방법을 보여주는 것입니다.

깔끔한 형식의 JSON 데이터를 인쇄해야 하는 경우 HTML의 JSON.stringify() 메서드와 <pre> 요소라는 두 가지 개념을 이해해야 합니다.

JSON.stringify() 메서드

이 메서드는 유효한 JavaScript 개체를 가져와 JSON 형식 문자열로 변환합니다. 최대 3개의 인수를 사용할 수 있습니다.

그러나 이 기사에서는 유효한 JavaScript 객체를 가져와 JSON 문자열로 변환하는 첫 번째 인수만 이해하면 됩니다.

JSON.stringify(value)

이 메서드는 문자열 형식의 value 인수(JavaScript 개체)를 반환합니다. 반환된 값은 읽을 수 있는 JSON 문자열 형식입니다. 그러나 가독성을 유지하기 위해 표시하는 것은 어려울 수 있습니다.

HTML의 <pre> 태그

프런트엔드 개발자는 <pre> 태그를 사용하여 텍스트 서식을 유지합니다. 텍스트의 문자는 너비가 동일합니다.

또한 이 태그로 래핑된 원본 텍스트의 공백과 줄 바꿈을 유지합니다.

JSON.stringify()를 사용하여 데이터를 JSON 문자열로 변환하는 경우 반환된 값을 <pre> 태그로 래핑해야 합니다.

React에 JSON 표시

다음은 JavaScript 객체를 가져와 JSON 문자열로 변환하고 깔끔한 형식을 유지하는 방법입니다.

export default function App() {
  const data = { name: "Irakli", age: 24, height: 185 };
  return (
    <div className="App">
      <p>{JSON.stringify(data)}</p>
      <pre>{JSON.stringify(data)}</pre>
    </div>
  );
}

CodeSandbox 라이브 데모를 열어 코드가 적용되는지 확인하세요.

라이브 데모에는 <pre> 태그가 있거나 없는 JSON 문자열이 포함되어 있습니다. 서식이 지정된 텍스트와 서식이 지정되지 않은 텍스트의 차이를 시각적으로 이해하는 데 도움이 될 수 있습니다.