[React] 파일 쪼갤 때 사용하는 import/export

상황

코딩을 하다가 너무 길 때 다른 곳으로 빼고 싶을 때, 다른 파일에서도 사용하고 싶을 때

 

내보내기 : export default 함수명/변수명

let name = 'Ahntoday';

export default name

파일 한개당 한번만 가능하다!

✅ 내보낼 변수가 많은데 다른 파일에서 쓸 수 있게 하고 싶다면?

let name = 'Ahntoday';
let name2 = 'SeoAn';

export { name, name2 }

export {변수1, 변수2}

 

받아오기 : import 함수명/변수명 from 경로

import name from './data.js';

{ name } 가져다가 쓰면 된다!

함수명/변수명 작명해서 사용하면 된다.

 

✅ 여러개 export한 것을 import해올 때

import { 변수1, 변수2 } from 경로

 

내보낸 이름과 동일하게 적어야한다.