import

갑자기 import의 중요성을 느끼게 되버렸다,,!
왜냐,,!

├── Component
│   └── Elements
│       ├──Input
│       ├──Select
│       ├──CheckBox
│       ├──DatePicker
│       ├──Input
│       └──Input
└ App.tsx

대략 이런 구조를 가지게 되었는데 Elements의 안에 있는 것들을 가져올때마다 하나의 폴더안에 있는 애들이지만,
전부다 따로 따로 가져오게 된 상황을 나 스스로 만들어버렸다.

import Select from "Component/Elements/Select"
import CheckBox from "Component/Elements/CheckBox"
...

이런식으로 여러줄이 생기니까 여간 보기 싫은게 아니었다.
그래서 해결방법은!

├── Component
│   └── Elements
│       ├──index <------요녀석을 추가하는것!
│       ├──Input
│       ├──Select
│       ├──CheckBox
│       ├──DatePicker
│       ├──Input
│       └──Input
└ App.tsx

사용방법또한 간단하다.

index.ts

import Input from "./Input"
import Select from "./Select"
import CheckBox from "./CheckBox"
...

export { Input, Select, CheckBox, ... }

결과

import { Select, CheckBox } from "Component/Elements"
...

이런식으로 폴더안에 있는 모든 것들을 index에 import 해준 뒤 export를 해준다면, 경로를 폴더까지만 사용할 수 있다.

여기까지는 알고 있었던 것들이고, 궁금증 2가지가 생겼다.
1. export default와 export의 차이는?

• export default는 모듈에서 단일 객체를 보낼때 사용한다.
  또한 import를 해올 때, 원하는 이름으로 사용 가능하다

//export한 파일
export default Objcet


//import한 파일
import Obj from "Object"
//Objcet를 사용하지 않아도 가능

• export는 다중 객체를 내보낼때 사용한다.
  그리고 import를 해올때는, 중괄호 안에 작성한다. default와 마찬가지로 원하는 이름도 사용 가능하다

//export한 파일
export const Objcet
export const Array

//import한 파일
import { Objcet } from "Object"
import { Array } from "Array"

//원하는 이름을 사용하고 싶을때는
import { Array as Ary } from "Array"
// 원래 이름 as 사용하고싶은 이름

2. import를 하지않고 바로 export가 가능할까?

• 가능하다

index.ts

import Input from "./Input"
import Select from "./Select"
import CheckBox from "./CheckBox"
...

export { Input, Select, CheckBox, ... } 

//아래와 같이 변경

index.ts

export { Input } from "./Input"
export { Select } from "./Select"
export { CheckBox } from "./CheckBox"

이렇게 사용하면 되는데 여기서 생기는 문제점은, default 문법을 사용한 애는 중괄호안에 들어가지 않는다.
그래서 아래와 같이 사용한다.

export { default as Input } from "./Input"
export { default as Select } from "./Select"
export { default as CheckBox } from "./CheckBox"

제대로 100% 다 맞는다고는 할 수 없지만,, 일단 내가 사용한 부분 기억나는대로 기록해본다.

참고자료 : 링크