[React] export, import하는 법

export default / import 문법

언제 사용하는가?

• 리액트에서는 state를 만들고 데이터를 담아서 사용하는 편
• 그러나 state에 넣어야할 데이터가 많을 때,useState() 안에 넣기엔 너무 길어서 다른파일에 보관했다가 import해서 사용할 수 있다.

How to?

• 넣고 싶은 많은 내용을 새로 만든 js파일에 작성한 후 변수에 담아주기
• 변수가 a 일 때 아래문법으로 export하기 (=내보내기)

> let a = 10;
export default a;

• 위의 a를 사용하고 싶다면 메인이 되는 app.js에서 import(=불러와서)사용하기

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

-단, export, import할 때 유의점
1) 변수, 함수, 자료형 전부 export 가능

2) 파일마다 export default 라는 키워드는 하나만 사용가능
(여러개 변수를 export하고 싶으면
-> {변수1, 변수2}이런식으로 중괄호 안에 넣어서 내보내기
-> export {변수1, 변수2} )
-> import {변수1, 변수2} ) from '경로'

3) 파일경로는 ./ 부터 시작해야합니다. 현재경로라는 뜻

• 위의 방법으로 변수를 받아왔다면 state에 데이터를 담아서 사용할 수 있음

(App.js 파일)

import data from './data.js';

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

}