[React] import/export 사용해보기

💡 실습 포인트!

• 쇼핑몰 레이아웃 디자인하기 포스팅에서는 하드코딩을 했었는데, 이번에는 데이터바인딩을 해주었다.
• 브라우저에 렌더링되어 보여지는 화면은 동일하다.

---

💜 상품 데이터 미리보기

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

• 데이터 바인딩을 하기 위해 샘플 상품 데이터를 준비했다.
• 각 상품 정보를 object 자료형에 담아 array 에 넣어주었다.

---

🤍 import / export 문법의 필요성 알아보기

• 이전에는 useState() 를 사용하여 이러한 array 형태의 자료를 담았지만, 데이터의 양이 많아질수록 코드의 가독성이 떨어지므로 따로 파일을 분리해서 사용할 필요가 있다.
• 그리고 파일을 분리해서 사용하기 위해서 import / export 문법을 알아야했다.

---

🤍 상품 데이터 전송방법 고민해보기

• 상품 데이터를 담은 파일을 data.js 라고 했을 때, 이 파일의 데이터를 App.js 로 전송하려면
• 먼저, data.js 에서 원하는 데이터를 export 하고
• App.js 에서 data.js 에서 export 한 데이터를 import 해주면 된다.

---

💜 export 이해하기

🤍 export default 문법 알아보기

• src 폴더에 App.js 와 나란히 상품 데이터를 담은 data.js 파일을 생성해준다.
• 이 파일에서 변수를 export 하고 싶을 때에는 export default 라는 문법을 사용하는데 사용방법은 다음과 같다.

// export default 사용방법1

let name = 'Seoyun';
export default name;
  

// export default 사용방법2
export default 'Seoyun';

• 변수명, 함수명, 자료형 전부 export 가 가능하다.
• 파일마다 export default 라는 키워드는 하나만 사용가능하며, 여러 개의 변수나 함수를 export 해야 한다면 중괄호 안에 export 할 변수나 함수를 넣어주면 된다.

---

🤍 export { } 문법 알아보기

• 여러 개의 변수나 함수 등을 export 해주고 싶을 때는 export { } 문법을 사용하면 된다.

let name1 = 'Seoyun';
let name2 = 'Jihyeon';

export { name1, name2 };

• export default 문법의 경우 변수명을 작성하지 않아도 사용이 가능했지만, export { } 문법은 꼭 변수명이나 함수명이 있어야 사용이 가능하다.

---

💜 import 이해하기

🤍 import 문법 알아보기

// export default 문법 사용방법1 사용한 경우 import 방법
import name from './data.js';

// export default 문법 사용방법2 사용한 경우 import 방법
import Name from './data.js';

• App.js 에서 data.js 에서 export 한 변수를 사용하고 싶다면 import 변수명 from '경로' 의 형태로 App.js 상단에 코드를 작성해주면 된다.
• data.js 에서 export 할 때 변수명을 작성했다면 해당 변수명을, 변수명 없이 export 했다면 App.js 에서 import 할 때 적절한 변수명을 지어주면 된다.
• 경로 작성할 때 ./ 은 현재의 경로를 의미한다.

---

🤍 import { } 문법 알아보기

• export { } 문법으로 내보낸 변수들을 가져다 사용하고 싶다면 import { } 문법을 사용하면 된다.

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

• 위와 같이 export 했던 변수들 중 사용하고자 하는 변수들만 골라서 중괄호 안에 변수명을 적어주면 된다.
• 이 경우는 export 했던 변수명을 그대로만 사용이 가능하다. 

---

💜 상품 데이터 파일로 데이터바인딩하기

🤍 data.js 파일 생성하기

// export default 문법 사용방법2 사용

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 하기

import Data from './data.js';

• data.js 에서 export 할 때 변수명을 작성하지 않았으므로 App.js 로 import 해올 때 Data 라고 변수명을 붙여주었다. 

---

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

// 전체 코드 미리보기
// 코드가 너무 길어서 불필요한 코드는 제외했다.

import Data from './data.js'; 

function App() {

  let [shoes, setShoes] = useState(Data);
  
  return (
    <div className="App">

        <div className="container">
            <div className="row">
                <div className="col-md-4 grid">
                    <img src="https://codingapple1.github.io/shop/shoes1.jpg" />
                    <h5>{shoes[0].title}</h5>
                    <p>{shoes[0].price}</p>
                </div>
                <div className="col-md-4 grid">
                    <img src="https://codingapple1.github.io/shop/shoes2.jpg" />
                    <h5>{shoes[1].title}</h5>
                    <p>{shoes[1].price}</p>
                </div>
                <div className="col-md-4 grid">
                    <img src="https://codingapple1.github.io/shop/shoes3.jpg" />
                    <h5>{shoes[2].title}</h5>
                    <p>{shoes[2].price}</p>
                </div>
            </div>
        </div>
    </div>
    );
}

export default App;

• data.js 에서 import 해온 Data 는 shoes 라는 state 의 값으로 넣어주었다.
• shoes 에 저장된 값은 array 타입이므로 shoes[0], shoes[1], shoes[2] 와 같은 형태로 각 상품의 정보를 꺼낼 수가 있다.
• 그리고 각 상품의 상세정보는 object 타입이므로 shoes[0].title, shoes[0].price 와 같은 형태로 상품의 상세 정보를 꺼낼 수 있다.