React - import & export

🖤 상품 데이터 보여주기

• 3개의 상품 데이터를 html에 보여줘야한다.
• 알려준 자료를 state에 보관해놓고 html에 데이터바인딩을 할 것이다.
• 실제 서비스였으면 서버에서 받아왔지만 서버가 없으니 변수에 저장해서 사용해야한다.

(자료)

[
  {
    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
  }
] 

• 어렵게 생각하지말고 [array 자료] 에 {object자료} 상품정보 3개가 들어있는 것이다.
• [{},{},{}] 이렇게 생긴 형태이다.

🤍 JS 복습시간! object 자료란?

• 여러가지 문자나 숫자를 한 변수에 보관하고 싶을 땐 array 자료를 사용해야한다.
• object 도 마찬가지이다.

let user = { name : 'kim', age : 20 }

• array 와 차이점은 예쁜 이름을 붙여서 저장할 수 있는 것이 장점이다.

console.log(user.name)

• 원하는 자료를 꺼내고 싶을 땐 점을 찍고 별명을 부르면 된다.
  
  

🖤 export default / import 문법

• 위 자료를 useState() 에 한번에 저장하기엔 너무 길다.
• 그럴 땐 다른 파일에 보관했다가 import 해오면 된다.
• ex) data.js 라는 파일이 있는데 여기 있는 변수를 App.js 에 가져와서 쓰고 싶으면

(data.js 파일)

let a = 10;
export default a;

• export default 변수명; 을 써서 원하는 변수를 밖으로 내보낼 수 있다.

(App.js 파일)

import a from './data.js';
console.log(a)

-> 10 출력

• export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로' 를 하면 된다.
• (유의점)
  변수, 함수, 자료형 전부 export 가 가능하다.
  파일마다 export default 라는 키워드는 하나만 사용 가능하다.
  파일경로는 ./ 부터 시작해야한다. (현재 경로라는 뜻)
  
  

🖤 export{} / import{} 문법

• 여러개의 변수들을 내보내고 싶으면 export default 말고 다른 문법을 사용해야한다.

(data.js 파일)

let name1 = 'Kim';
let name2 = 'Park';
export { name1, name2 }

(App.js 파일)

import { name1, name2 } from './data.js';

• (유의점)
  export{} 했던 것들은 import{} 를 쓸 때 자유작명이 불가능하다.

🖤 export import 문법 실전에서 사용하기

(data.js 파일)

let data = (위에 나왔던 자료)... 생략
export default data

(App.js 파일)

import data from './data.js';

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

}

🖤 상품 데이터를 html에 데이터바인딩 하기

<Container>
  <Row>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
      <h4>{shoes[0].title}</h4>
      <p>{shoes[0].price}</p>
    </Col>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
      <h4>{shoes[1].title}</h4>
      <p>{shoes[1].price}</p>
    </Col>
    <Col sm>
      <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
      <h4>{shoes[2].title}</h4>
      <p>{shoes[2].price}</p>
    </Col>
  </Row>
</Container>