ReactJS에서 외부 JSON 파일 불러와서 사용하기

1. 개요

• 데이터나 컴포넌트 같은 걸 app.js에 다 집어넣으면 코드가 길고 복잡해짐
• 그래서 따로 파일을 만들어서 불러오기 하면 코드가 간결해지고 가독성이 좋아짐
• 컴포넌트나 데이터를 담을 js파일 하나 만들고, 코드를 작성한 후 export
• 외부 파일을 사용할 JS파일에서는 외부 파일을 import 하면 됨

2. 사용법

(1) data.js

• 일단 data.js파일 하나 만들어봅시다

let data = [
    {
      id : 0,
      menu : "김밥",
      price : 1000
    },
  
    {
      id : 1,
      menu : "떡볶이",
      price : 1000
    },
  
    {
      id : 2,
      menu : "만두",
      price : 1000
    }
  ] 

// 변수 export
// export default 변수명
export default data;
// 만약 변수 여러개 export 하고 싶으면?
// export {변수명1, 변수명2}

• 데이터 다 만들었으면 export default 변수명 코드를 이용해 export 시킬 수 있음
• 만약 변수가 여러개라면 export {변수명1, 변수명2, ...} 형태로 코드를 입력하면 됨

(2) app.js

• data.js 파일을 import 해줘야 함

import data from "./data.js";
// 변수가 여러개라면
//import {변수명1, 변수명2, ...} from './data.js'

function App() {
  let [menu] = useState(data);
  return (
    <div>
      {menu.map(function (a, b) {
        return <div>{a}</div>;
      })}
    </div>
  );
}

• import 변수명 from '외부파일 경로'; 형태로 외부 파일을 불러올 수 있음
• let [state명] = useState(import변수명) 형태로 state에 넣어 쓸수도 있음