React - 코드가 너무 길어 복잡하다면?

let data = [
  {
    id: 0,
    title: "닭가슴살 차돌깍두기 볶음밥",
    protein: "단백질:32구람",
    weight: "300구람",
    price: "4180원(개당)",
  },

  {
    id: 1,
    title: "닭가슴살 김치 볶음밥",
    protein: "단백질:39구람",
    weight: "300구람",
    price: "3580원(개당)",
  },

  {
    id: 2,
    title: "닭가슴살 소불고기 볶음밥",
    protein: "단백질:42구람",
    weight: "300구람",
    price: "3580원(개당)",
  },

  {
    id: 3,
    title: "혼합 닭가슴살 볶음밥 2종",
    protein: "",
    weight: "300구람",
    price: "3567원(개당)",
  },
];

위의 상품정보들을 state로 만들려고 하는데 useState()에 넣기엔 너무 길다...
이럴 땐 위의 상품정보들을 다른파일에 보관한 후 내보낸 후 가져오는 방식인
export, import 방식을 사용할 수 있다.

-** Data.js 라는 파일을 새로 만들고 상품정보들을 옮긴다. 그리고 export 해준다. **

let data = [
  ~~~~~~`
];
export default data(변수명) -> 다른 파일에서도 이 데이터를 가져다쓸 수 있게 해주는 일명 'export'하는 방법.

**- 이 데이터를 가져다쓸 파일로 이동해서 import를 해준다.**

import data(변수명) from './data.js'; 

출처. 코딩애플