React import,export 활용하기 (코드 쪼개기)

파일이 점점많아진다, 언제까지 App.js하나에서만 코드를 관리할 수는 없다.

 

데이터를 외부에서 불러올 수도있고 많은 변수를 선언할 수도있고 수많은 함수가 생길 수 도 있음

 

여튼 import,export를 활용해서 가독성과 코드쪼개기를 할 수 있다.

 

1.변수하나 import,export해오기

var name = 'Kimjiwon'
export default name

이와같이 내보내구

import name from './data.js'

이와같이 불러온다.

`import 작명 from 경로`의 형태

 

2.변수두개이상 import,export해오기

var name = 'Kimjiwon'
var name2 = 'jiwonman'
export {name,name2}

이렇게 내보내구

import {name,name2} from './data.js'

이와같은경우는 내보낼때의 변수와 똑같이 불러와야한다.

 

3.배열,딕셔너리같은 object형태 import,export해오기

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

이렇게 내보내고

import Data from './data.js'

이와같이 불러서 사용한다 마찬가지로 import 작명 의 형태이다.

 

let [shoes,shoes변경] = useState(Data)

이와같이 바로 가져와서 사용 할 수 있다.

 

useState의 데이터로 바로 아래와 같이 사용 할 수 있다.

<div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%"></img>
    <h4>{shoes[0].title}</h4>
    <p>{shoes[0].content} & {shoes[0].price}</p></div>

    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%"></img>
    <h4>{shoes[1].title}</h4>
    <p>{shoes[1].content} & {shoes[1].price}</p></div>
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%"></img>
    <h4>{shoes[2].title}</h4>
    <p>{shoes[2].content} & {shoes[2].price}</p></div>