공부방

import / export 본문

React

import / export

코딩 화이팅 2024. 8. 4. 00:11

object 자료형

let user = { name : 'kim', age : 20 }
  • 자료들 왼쪽에 이름을 붙여야됨
  • user라는 변수에 'kim', 20 둘 다 저장이 가능
  • array와 다르게 이름 붙여서 저장할 수 있는게 장점
  • 원하는 자료를 꺼내고 싶다면 점 찍고 이름 부르면 된다.
    • ex) user.name

export default / import

(data.js 파일)

let a = 10;
export default a;

(App.js 파일)

import a from './data.js';
console.log(a)
  • data.js라는 파일에 데이터들을 저장해두고 App.js에서 가져와서 쓸 수 있다.
  • export default 변수명; 
    • 원하는 변수를 밖으로 내보내기
  • export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'
  • 변수, 함수, 자료형 전부 export 사용 가능
  • 파일마다 export default 라는 키워드는 하나만 사용 가능
  • 파일 경로에서 ./->현재 경로 라는 뜻

export {} / import {}

(data.js 파일)

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

(App.js 파일)

import { name1, name2 } from './data.js';
  • 여러 개의 변수, 함수 등을 내보내고 싶을 때
  • export {}로 내보냈다면 가져다 쓸 때 import {}로 써서 가져옴.
  • export {} 했던 것들은 import {} 쓸 때 자유작명이 불가능. export 했던 변수명 그대로 써야됨

데이터 가져와보기

data.js

let data =
[
  {
    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 data;

(App.js 파일)

import data from './data.js';

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

}

 

상품데이터를 html에 데이터바인딩

function App(){
  let [shoes] = useState(data);
  return (
    <div className="App">
      (생략)
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <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 src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}

 

'React' 카테고리의 다른 글

XML 파싱  (0) 2024.09.20
Card 컴포넌트 만들고 props, map  (0) 2024.08.17
이미지 넣는 법 & public 폴더 이용하기  (0) 2024.07.28
CSS 라이브러리 사용하기(React-BootStrap)  (0) 2024.07.27
날짜값 바꾸기  (0) 2024.06.21