React에서 JSON 문자열 구문 분석

1. React에서 JSON 문자열 구문 분석
2. React에서 로컬 JSON 데이터 구문 분석
3. React에서 외부 JSON 데이터 구문 분석

JavaScript는 웹의 언어입니다. 인터넷의 데이터는 종종 JSON 형식으로 교환됩니다.

때로는 원시 JavaScript 데이터를 JSON으로 변환하려고 합니다. 다른 경우에는 JSON 데이터를 구문 분석하여 JavaScript 데이터를 가져와야 합니다.

이 문서에서는 유효한 JavaScript 데이터를 얻기 위해 JSON 데이터를 구문 분석하는 프로세스를 설명합니다.

React에서 JSON 문자열 구문 분석

JSON은 웹에서 데이터를 교환하는 가장 일반적인 형식입니다. 이러한 이유로 JavaScript에는 JSON 문자열을 유효한 JavaScript 객체로 변환하는 내장 JSON.parse(str) 메서드가 있습니다.

React에서 로컬 JSON 데이터 구문 분석

일반 JavaScript 객체를 가져와서 JSON 형식으로 지정하는 예를 살펴보겠습니다.

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

JSON.stringify() 메서드를 사용하여 데이터를 JSON 형식으로 저장했습니다. CodeSandbox에 가서 콘솔을 확인하면 데이터가 JSON으로 저장됩니다.

그런 다음 JSON.parse(str) 메서드를 사용하여 이 데이터를 JSON에서 유효한 JavaScript 개체로 다시 변환할 수 있습니다.

export default function App() {
  const sampleData = JSON.stringify({
    name: "Irakli",
    messages: ["hello", "goodbye", "good day"],
    age: 24
  });
  console.log(sampleData);
  const parsedData = JSON.parse(sampleData);
  console.log(parsedData);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

다시 한 번 데이터를 console.log()하여 두 형식 간의 차이점을 확인할 수 있습니다.

JSX 내에서 JSON.parse() 사용

JSX 외부에서 JSON 데이터를 구문 분석하는 것이 더 읽기 쉽습니다. 그러나 return 문 내에서도 이를 수행할 수 있습니다.

한 번 보자:

<div className="앱">
       <h1>{JSON.parse(sampleData).name}</h1>
     </div>

이 코드를 사용하여 sampleData 변수에 name 속성을 표시할 수 있습니다.

JSX는 템플릿 언어일 뿐입니다. 전체가 JavaScript로 작성된 Top-level React API로 컴파일되므로 JSON.parse(str) 및 기타 JavaScript 메서드를 JSX 내에서 자유롭게 사용할 수 있습니다.

React에서 외부 JSON 데이터 구문 분석

대부분의 경우 외부 소스에서 JSON 데이터를 받습니다. 이러한 경우 Fetch API 및 관련 구문을 사용하여 JSON 데이터를 일반 JavaScript 데이터로 전환할 수 있습니다.

export default function App() {
  fetch("https://api.chucknorris.io/jokes/random?category=dev")
    .then((res) => res.json()) // the .json() for parsing
    .then((data) => console.log(data));
  return (
    <div className="App">
      <h1></h1>
    </div>
  );
}