[React] 2. import/export

이제 실제 상품명과 상세 정보를 데이터 바인딩 합시다!!

src폴더 내에 data파일을 만들어주고 실제 data가 들어있는 data.js 파일을 만들어 주었음

//data.js
export default [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
  },
];

import/export 문법

어떤 특정파일의 데이터를 다른파일에서 쓸수있게 컨트롤 해준다

//data.js
var name='Kim';

export default name;

name이란 변수를 내보내주었다

//App.js
import name from "./data/data.js";

function App() {
  return (
    <div className="App">
      {name}
     .
     .
     .

원하는 곳에 import해서 사용하면 끝

내보낼 변수가 많다면??

내보내기: export {변수1, 변수2...}
가져오기: import {변수1, 변수2...} from 경로

//data.js
var name='Kim';
var name2='Park';

export {name,name2}

//App.js
import { name, name2 } from "./data/data.js";

function App() {
  return (
    <div className="App">
      {name}
      {name2}
    .
    .
    .

이제 긴 데이터를 가진 변수를 state에 넣을수 있다

//data.js
var data = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
  },
];

export default data;

//App.js
import data from "./data/data.js";
import { useState } from "react";

function App() {
  let [shoes, setShoes] = useState(data);
.
.
.

이제 잘 데이터 바인딩 해서 쓰기만 하면된다!!

.
.
<div className="container">
        <div className="row">
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes1.jpg"
              width="100%"
            />
            <h4>{shoes[0].title}</h4>
            <p>
              {shoes[0].content} & {shoes[0].price}
            </p>
          </div>
.
.

상품 정보가 잘 들어갔다ㅎㅎ

html태그가 반복됨으로 컴포넌트로 만들어서 데이터바인딩 한뒤 출력해보기 (혼자 해보자)

나의 코드

function Shoes({ shoes }) {
 return (
   <div className="col-md-4">
     <img src={shoes.img} width="100%" />
     <h4>{shoes.title}</h4>
     <p>{shoes.content}</p>
   </div>
 );
}

우선 Shoes컴포넌트를 만들고 받아온 props를 통해 출력하도록 하였다, img url은 따로 data.js파일의 데이터들에 하나씩 url을 적어주었다.

<div className="container">
        <div className="row">
          {shoes.map((item, i) => {
            return <Shoes shoes={shoes[i]} />;
          })}
        </div>
      </div>

shoes state를 map함수를 돌린뒤 Shoes컴포넌트를 리턴하고 props값으로 각 인덱스값의 데이터를 전달해주었다. 데이터는 3개 들어있으므로 Shoes 컴포넌트를 3번 리턴할 것이다.

각각의 데이터에 담긴 항목들이 잘 출력된다

강의에선 img url을 주는 방식을 약간 다르게 했다

 <div className="container">
        <div className="row">
          {shoes.map((item, i) => {
            return <Shoes shoes={shoes[i]} idx={i} />;
          })}
        </div>
      </div>

각데이터의 인덱스를 전달해주는 props를 추가했다.

function Shoes({ shoes, idx }) {
  return (
    <div className="col-md-4">
      <img
        src={"https://codingapple1.github.io/shop/shoes" + (idx + 1) + ".jpg"}
        width="100%"
      />
      <h4>{shoes.title}</h4>
      <p>{shoes.content}</p>
    </div>
  );
}

idx props에는 0,1,2값이 전달될 것이므로 img src옵션에 문자열을 각 url에 맞게 잘 만들어준다.

데이터가 엄청 많을경우 하나하나 입력하기는 힘들것이므로 이방법이 더 괜찮은거 같다!!!!

동일하게 잘 나온다ㅎㅎ

(map함수 쓸때 key값주는거 잊지말자!!!!!!!)

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)