React의 외부 파일에서 JSON 데이터 읽기

1. React의 외부 파일에서 JSON 데이터 읽기
2. import 문을 사용하여 React의 외부 파일에서 JSON 데이터 읽기
3. require() 함수를 사용하여 React의 외부 파일에서 JSON 데이터 읽기

JSON은 웹에서 데이터를 교환하는 가장 실용적인 형식입니다. React로 구축된 웹 애플리케이션은 일반적으로 JSON 형식의 외부 데이터를 가져옵니다.

외부 데이터가 없으면 응용 프로그램이 그다지 유용하거나 동적이지 않을 것입니다. 일반적으로 데이터 소스는 API이지만 외부 파일일 수도 있습니다.

이 기사에서는 React에서 JSON 파일의 데이터를 읽는 방법을 살펴봅니다.

React의 외부 파일에서 JSON 데이터 읽기

React에서 JSON 파일의 데이터에 액세스하는 것은 상당히 쉽습니다. JSX에서는 .map() 메서드를 사용하여 배열을 살펴보고 배열의 모든 객체에서 정보를 표시할 수 있습니다.

이를 위해서는 JavaScript 표현식을 사용하여 <h1>과 같은 요소를 생성할 수 있는 중괄호 {}가 필요합니다.

React에서 이를 수행하는 두 가지 방법을 살펴보겠습니다.

import 문을 사용하여 React의 외부 파일에서 JSON 데이터 읽기

간단한 import 문을 사용하여 React 구성 요소에서 외부 JSON 데이터를 사용할 수 있습니다.

import 문은 라이브 바인딩을 생성합니다. 즉, 원본 파일에서 데이터의 일부를 변경하면 응용 프로그램의 값도 업데이트됩니다.

예:

import { stockData } from "./data";

export default function App() {
    return (
    <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
        </div>
    );
}

JSON 형식의 개체를 포함하는 data.json 파일에서 stockData 변수를 가져왔습니다.

그런 다음 중괄호를 사용하여 stockData 배열에서 .map() 메서드를 호출하고 배열의 각 항목에서 <h1> 요소로 값을 표시했습니다.

CodeSandbox에서 이 라이브 데모를 확인하십시오. 소스 데이터에서 변경을 시도하고 React 앱에서 변경 사항이 있는지 확인하십시오.

require() 함수를 사용하여 React의 외부 파일에서 JSON 데이터 읽기

require() 함수를 사용하여 React 구성 요소에서 외부 JSON 데이터를 읽는 또 다른 방법이 있습니다.

예:

var data = require("./moredata.json");

export default function App() {
    return (
        <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
            <h2>The name is: {data[0].name}</h2>
        </div>
    );
}

이 경우 moredata.json 파일에서 데이터를 읽고 data 변수에 저장합니다.

그런 다음 <h2> 요소를 만들었습니다. 여는 태그와 닫는 태그 사이에 로드한 데이터에 대한 참조를 배치했습니다.

배열의 첫 번째 객체의 name 속성을 읽습니다. 라이브 데모에서 볼 수 있듯이 작동합니다.

가능한 오류

최신 버전의 Webpack은 이 기능을 지원합니다. 오류가 발생하면 json-loader와 같은 외부 로더 설치를 고려하십시오.

npm에서 확인하세요.