React - import, export

이번에는 아래의 화면의 상품항목에서 상품데이터를 html에 보여주도록 해보겠습니다. 

아래의 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다.

실제 서비스였으면 서버에서 받아왔겠지만 서버가 없으니 서버에서 보낸것이라고 가정하겠습니다.

데이터를 보면 [arry자료]에 상품정보 3개가 들어 있습니다. 

근데 상품정보가 길고 복잡해서 {object자료}에 넣어뒀습니다. 축약해보면 [ {}, {}, {} ] 이렇게 생겼습니다. 

[
  {
    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 / import 문법

위에 있던 상품정보들을 state로 만들고 싶은데 useState()안에 넣기엔 너무 깁니다. 

이럴 때는 다른파일에 보관했다가 import해올수 있습니다. 

예를들어 data.js라는 파일에 있는데 거기 있던 변수를 가져와서 쓰고싶으면 

export default 변수명;

이렇게 원하는 변수를 보낼 수 있습니다.

//data.js 파일

let a = 10;
export default a;

export했던 변수를 사용하고 싶으면 

import 작명 from './파일경로' 하면 됩니다. 

 

console에서 확인해보면 정확하게 나옵니다. 

(유의점)

• 변수, 함수, 자료형 전부 export 가능합니다.
• 파일마다 export default 라는 키워드는 하나만 사용가능합니다.
• 파일경로는 ./ 부터 시작해야합니다. 현재경로라는 뜻 

 

export{} / import{} 문법

여러개의 변수들을 내보내고싶으면 export default 말고 아래의 문법을 사용합니다.

// data.js파일

let a = 10;
let b = 100;

export { a,b }

받는 파일에서는 

export{} 이걸로 내보냈으면 가져다가 쓸 때 import {} 문법을 사용합니다. 

//App.js

import { a, b} from './data.js';

 

(유의점)

• export {} 했던 것들은 import {} 쓸 때 자유작명이 불가능합니다. export 했던 변수명 그대로 적어야합니다. 

그래서 결론은 

export default / import 를 쓰거나 (변수가 한개일때)

export {} / import {} 를 쓰면됩니다. (변수가 여러개)

 

 

 

그래서 이제 상품데이터를 다른파일에 저장해놓고 가져와보겠습니다.

아래와 같이 해주었습니다. 

//data.js 파일

let data = 위에있던 긴 array 자료;
export default data

//App.js 파일
import data from './data.js';

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

}

 

html에 데이터바인딩하기

방금 import해온건 상품 3개의 데이터입니다.

각각 상품의 제목, 설명, 가격이 있습니다. 자리에 맞게 데이터바인딩해보겠습니다.

이전에 작성했던 코드에서 데이터바인딩만해주면됩니다. 자료가 객체(object)형태라 그에 맞게 사용해줍니다. 

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

결과를 확인해보면 데이터가 잘 나옵니다. 

 

추가적으로 코드를 보면 상품을 생산하는 코드가 중복되고 지저분해서 컴포넌트로 작성하고 map을 이용해 생성해보겠습니다. 

먼저 컴포넌트부터 만들어보겠습니다.

function ShoeItem(props)
{
  return(
    <div className="col-md-4"> <img id="shoe_img" src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>
            <h4>{shoes[0].title}</h4>
            <p>{shoes[0].price}</p>
    </div>
  )
}

그리고 map을 이용해 상품갯수만큼 컴포넌트를 호출해주겠습니다.

추가적으로 두번째매개변수 i를 이용해 컴포넌트에 인덱스를 전달해주고 

shoes데이터도 전달해줍니다.

<div className="container">
      <div className="row">
        {
        shoes.map(function(a,i){
          return(
            <ShoeItem index={i}  shoes={shoes}></ShoeItem>
          )
          
        })
        }
      </div>
    </div>

 

그럼 컴포넌트의 코드는 아래와 같이 변경됩니다.

function ShoeItem(props)
{
  return(
    <div className="col-md-4" key={props.index}> <img id="shoe_img" src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"/>
            <h4>{props.shoes[props.index].title}</h4>
            <p>{props.shoes[props.index].price}</p>
    </div>
  )
}

 

결과화면입니다.

 

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌