728x90
반응형
같은 폴더 authform 에서 가져오는 컴포넌트를 좀 더 깔끔하게 가져올 수 없을까 🤔
import DropBox from "./authform/dropBox/DropBox";
import useAuth from "./hooks/useAuth";
import Errormodal from "./modal/Errormodal";
import BirthInput from "./authform/BirthInput";
import EmailInput from "./authform/EmailInput";
import ImageInput from "./authform/ImageInput";
import NameInput from "./authform/NameInput";
import PasswordInput from "./authform/PasswordInput";
고민하던 차에 바렐 구조가 생각났다.
이렇게 authform 폴더에 index.ts 하나 만들고
//index.ts
export { default as ImageInput } from "./ImageInput";
export { default as EmailInput } from "./EmailInput";
export { default as BirthInput } from "./BirthInput";
export { default as NameInput } from "./NameInput";
export { default as PasswordInput } from "./PasswordInput";
export { DropBox } from "./dropBox";
폴더 안 컴포넌트를 가져와서 내보내는 것!
이렇게 내보내면
import 할 때
import {
BirthInput,
EmailInput,
ImageInput,
NameInput,
PasswordInput,
DropBox,
} from "./authform/index";
이렇게 깔끔하게 가져올 수 있다
🌈 폴더 안의 폴더에 index.ts 만들기
DropBox 폴더 안에도 똑같이 index.ts 를 만들어서 내보냈다
//dropBox/index.ts
export { default as DropBox } from "./DropBox";
728x90
반응형
'TIL' 카테고리의 다른 글
react) codebox에서 받은 파일 npm i 안 될 때 (0) | 2023.01.21 |
---|---|
[Context] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> (0) | 2023.01.21 |
observer API 무한스크롤 (0) | 2023.01.08 |
프로그래머스 js 마법의 엘리베이터 (0) | 2022.12.31 |
바벨 (0) | 2022.12.27 |
댓글