Coding Apple, React 강좌 내용 정리.9 - 쇼핑몰 비슷하게 만들어 보기.2 - import / export

import / export

전 강의 내용에 이어서 진행 (링크)

 

외부의 데이터 (data.js / export) -> import해서 사용하는 

<원래는 Database에서 가져와 뿌려주는 거야할텐데, 일단 강의하는대로 간다>

 

   정보 데이터 만들기   

- src 폴더에 파일 생성 (data.js) 후 export default 적는다

// data.js 내용
export default [
    {
        id : 1,
        title : "White and Black",
        content : "Born in Newyork" ,
        price : 120000
    },
    {
        id : 2,
        title : "Red Knit",
        content : "Born in Seoul" ,
        price : 110000
    },
    {
        id : 3,
        title : "Back",
        content : "Born in Paris" ,
        price : 100000
    }
]

   App.js 에 import 하기   

1. import Data from './data.js'
2. state 선언 : let [shoes, shoes변경] = useState(Data)  
3. 본문에 사용 : { shoes[0] }

ex) map (loop 돌려서, 해당 내용을 log에 찍기)

{
  shoes.map( (shoe, idx)=> {
    console.log(shoe.content + ":" + idx)
  })
}

 

 

앞서 소스에선 신발 정보/이미지를 단순 코딩하는데,

component로 만들고 내용를 조회해보는걸로 바꿔본다

<div className="container">
        <div className="row">
        // 반복.1
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
          </div>
        // 반복.1
        
        // 반복.2
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%" />
          </div>
        // 반복.2
        
        // 반복.3
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%" />
          </div>
        // 반복.3
        </div>
      </div>

   component (function & return) 만들기   

상위 fuction의 값을 전달하기 위해서, props를 사용한다.

// Goods라는 항목을 반복될 항목을 써놓는다.
function Goods(props) {
  return (
    <div className="col-md-4">
      // props를 통해서 값을 가져와서 뿌린다.    
      <img src={"https://codingapple1.github.io/shop/shoes"+props.shoes.id +".jpg"} width="100%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  )
}

본문 내용

<div className="container">
  <div className="row">
  {
    shoes.map( (shoe, idx)=> {
      return <Goods shoes={shoe} key={idx} />
    })
  }
  </div>
</div>

 

완성본

data에 있는 것대로 loop돌려서 값을 뿌린다.