import / export

어레이가 너무 길때 다른 파일에 어레이를 담고 그 파일에서 꺼내오게 할 수 있다.

간단하게, 문법을 설명해보면,

파일을 쪼갤 때 export default를 사용한다. 내보내기라고 부른다. 즉, 내보내긴 export default 변수명 이렇게 사용한다.

그리고 가져오기는 import 변수명 from 경로 이렇게 사용한다.

예를 들면,

var name = 'Kim';
//이 변수가 유용해서 내보내고 싶으면
export default name
//이렇게 적으면 이 변수를 뱉는거라 다른 파일에서 가져다 사용할 수 있다.
import {name} from './data.js';
//가져오기는 import 작명 from 경로로 사용한다. 변수를 가져올 땐 변수를 import에 써야한다.
//위처럼 import해오면 사용할때 {name}으로 사용할 수 있다.

export default는 한번 밖에 사용하지 못하므로, 내보낼 변수가 많다면, export {name, name2}이렇게 두개를 내보낼 수도 있다. 가져오려면 import {name, name2} from './data.js'이렇게 사용한다.

 

예를 들면, 먼저 src폴더에 data.js라는 어레이를 담을 폴더를 만들어 export default를 이용해 담아준다

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에 useState를 만들어 그 안에 붙여 넣으려면

import Data from './data.js';

function App () {

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

이렇게 import를 해오고 Data는 작명 useState에 적어주면 된다.

 

그리고 import 해올 때

import Table 은 export default 된거 가져오기 이고

import {Table} 은 Table이라는 변수/함수 가져오기 이다.