[shop-project] import / export

🌈 import / export

• 파일을 쪼갤 때 활용하는 import / export 문법
• component를 파일로 쪼개서 서로 연결할 때, 하위 컴포넌트에 export 해주고 상위 컴포넌트에 붙여넣을 때는 import 해준다.
• data자료가 너무 길 때, 다른 파일로 분리할 경우도 마찬가지로 적용한다.

🍎 기본 문법

1. 내보내기

export default

❗ export default는 한 파일당 1개 밖에 못쓴다

2. 가져오기

import 변수명작명 from './경로' (파일경로 from뒤에 붙이기)

❗ 다른 파일을 불러올 때, 경로를 작성할 때는 무조건 ./ 로 시작한다

3. 불러온 파일을 활용하기

return문 내에서 중괄호({ })안에 작명한 변수명을 가져다 쓴다
{작명한 변수명}

return문 밖에서 작명한 변수명만 그대로 붙여 쓴다(중괄호없이)
let [state, setState] = useState(작명한변수명)

🐣 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
    }
]



// App.js 파일
import React, { useState } from 'react';
import Data from './data.js';  // import 해서 data.js파일 불러온다

function App() {

  let [shoes, setShose] = useState(Data);
  // shoes라는 state안에는 data.js안에 담겨있는 object자료가 모두 담겨있다

  return (
    <div className="col-md-4">
        <h4> { shoes[0].title } </h4>  // data.js안의 데이터 중 title
        // array형태니깐 indexing 해주기!!!
        <p> { shoes[0].content } & { shoes[0].price } </p>  
    </div>
  )
}

🐣 App.js파일 내용 외부 Component로 분리한 뒤 축약하기(반복문)

// App.js 파일
import React, { useState } from 'react';
import Data from './data.js';  
import Product from './component.Product.js'; // product.js 파일 가져온다

function App() {

  let [shoes, setShose] = useState(Data);

  return (
    <Product shoes={shoes[0]} />  // 하위 컴포넌트(product.js)로 0번째 state 보내주기
    <Product shoes={shoes[1]} />  // 1번째 state 보내주기
    <Product shoes={shoes[2]} />  // 2번째 state 보내주기
    // 화면에 Product컴포넌트를 3개를 보여주고 싶어서 3개로 보여주는 것(반복문으로 축약필요)
  )
}



// Product.js 파일
import React from 'react';

function Product(props) {   // props로 받기

  return (
    <div className="col-md-4">
        <h4> { props.shoes.title } </h4> 
        <p> { props.shoes.content } & { props.shoes.price } </p>  
    </div>
  )
}
export default Product

위 내용은 부모 컴포넌트(App.js)의 데이터인 shoes의 state를 하위 컴포넌트(Product.js)에 props로 전달하는 과정이다.
부모 컴포넌트에서 <Product />를 3개를 생성 후, 각 state의 인덱스별로 전달한다. 즉, 자료의 index만큼 복수로 전달하고, 하위 컴포넌트에서는 indexing없이 그냥 받는다. <Product shoes={shoes[0]}는 0번째 index를 가진 정보만 전달, <Product shoes={shoes[1]}는 1번째 index를 가진 정보만 전달 하는 등 하위 컴포넌트에서 index에 따라 여러개의 태그를 생성하는 것이 아니라 상위 컴포넌트에서 index에 따라 별도로 전달하기 때문에, 하위 컴포넌트는 indexing없이 기본 태그로만 받는다.

// App.js 파일 내 <Product> 컴포넌트 반복문으로 돌리기
import React, { useState } from 'react';
import Data from './data.js';  
import Product from './component.Product.js';

function App() {

  let [shoes, setShose] = useState(Data);

  return (
    // shoes state를 반복문 돌린다 (return문 안의 반복문은 중괄호로 감싸준다!!)
   {
      shoes.map ( (a, i) => {
        return <Product shoes={ shoes[i] } key={i} />  // shoes[0], shoes[1], shoes[2]  
      })
    }

  )
}