[react] 쇼핑몰 project - 2 : main_page 데이터 파일 구분하기 & 다른 파일 데이터 사용하기 (export/import 문법)

다른 파일에서 데이터 갖고오기 & 해당 데이터 사용하기

쇼핑몰의 메인페이지에 전시되는 상품의 상품명과 상품 내용에 알맞은 데이터를 넣어보자!
신발에 대한 데이터는 이 사이트의 중요 자료이고, 추가,삭제,교체 등 다양하게 다루기 위해 App.jsx 파일내 State 상태변수에 담아서 사용해야한다.

• useState : state 변수에 들어갈 데이터를 [] 대괄호내에 나열해주면 된다!

하지만, App.jsx 컴포넌트의 state 변수에 계속 추가되는 데이터를 그대로 담는 것은 좋지않다.

• 가독성도 떨어지고, 신발 데이터 1000 개 이상으로 많다면..? ^^... 상상만해도 끔찍하다.

function App() {
  let [shoesData, setShoesData] = useState([
  {
    id: 0,
    title: "Hansome",
    content: "누구보다 멋지고 싶은 날 꾸며주는 신발",
    price: 100000,
  },
  {
    id: 1,
    title: "cute",
    content: "가볍고 운동하기 좋은 신발",
    price: 80000,
  },] ...[..]);
}

data 담을 파일 생성

이러한 데이터는 담을 파일을 생성 후 그 안에 데이터를 작성한다.

• data.js 파일 생성 : 해당 파일에 데이터 담아주기

export 데이터 내보내기

다른 파일에서 data.js 내의 데이터를 사용할 수 있도록 변수에 담아 내보낸다.

// data.js 파일
export default [
  {
    id: 0,
    title: "Hansome",
    content: "누구보다 멋지고 싶은 날 꾸며주는 신발",
    price: 100000,
  },

  {
    id: 1,
    title: "cute",
    content: "가볍고 운동하기 좋은 신발",
    price: 80000,
  },

  {
    id: 2,
    title: "nice",
    content: "발목까지 감싸주는 신발",
    price: 110000,
  },
];

export, import 문법

• export : 내보내기, 해당 파일내 데이터를 내보내주는 문법
• import : 갖고오기, 해당 파일에서 사용할 데이터를 갖고오는 문법

---

옵션

• exprot dafault : 한 파일 내 1번만 사용이 가능하다. dafault로 내보낸 데이터를 다른 파일에서 사용할땐 변수명을 마음대로 정해서 사용한다.

  import 변수명 from "데이터가 있는 파일경로(export하는 파일경로)"

• export {변수명, 변수명} : 여러개의 데이터를 내보내야할 경우 사용하는 문법, 각각 변수에 담아 export 내보내야 한다.

  import {같은 변수명, 같은 변수명} 이때 작성한 변수명은 이 데이터를 사용할 파일에서 똑같이 사용해야한다.

import: 데이터 갖고와서 사용

import 문법으로 data.js 파일내의 데이터를 Data라는 변수명으로 갖고와 사용한다.
해당 데이터가 담긴 Data 변수를 state 변수에 shoesData에 useState(Data) 담아준다.

 let [shoesData, setShoesData] = useState(Data);

데이터 자료형이 shoesData = [{데이터},{데이터},{데이터}] 배열내에 객체 형태로 저장되어있다.

이 데이터를 사용하려면 배열의 나열 순서, 인덱스 특성과 객체의 {key : value }특성을 활용해야한다.

• shoesData[index] :shoesData[0],..[1]..[2], 0번째, 1번째.. 데이터를 사용할 수 있다.
• shoesData[0].key : 객체의 { 키 : 값 } 의 키를 사용하여 해당 값을 갖고와서 사용한다. ex) 신발명이 필요할 경우 :shoesData[0].title

// App.jsx 파일

import Data from "./data.js";

function App() {
  let [shoesData, setShoesData] = useState(Data);

  return ( 
    <>
      <div className="product-container">
          <div className="row">
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
              <h3>{shoesData[0].title}</h3>
              <p>{shoesData[0].content}</p>
              <p>{shoesData[0].price}</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes2.jpg"></img>
              <h3>{shoesData[1].title}</h3>
              <p>{shoesData[1].content}</p>
              <p>{shoesData[1].price}</p>
            </div>
            <div className="col-md-4">
              <img src="https://codingapple1.github.io/shop/shoes3.jpg"></img>
              <h3>{shoesData[2].title}</h3>
              <p>{shoesData[2].content}</p>
              <p>{shoesData[2].price}</p>
.....
    </>
  );
}