React 깔끔하게 컴포넌트 import 하기

 

같은 폴더 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";