<aside> 💡 컨벤션 맞춰보아요~🎵
</aside>
JSX
문법이 적용된 파일은 tsx
확장자를 사용하고 그외에는 ts
확장자를 사용합니다.컴포넌트 파일 생성 규칙은 아래와 같습니다.
└── components
├── atoms
│ └── Container
│ ├── Container.tsx // 실제 Container 컴포넌트 핵심 내용
│ └── index.ts // Container 컴포넌트 export용
└── index.ts // 모든 components export용
index.ts
라는 파일명에는 컴포넌트의 정의
를 작성하지 않고 모듈용(export)으로 사용합니다.
실제 컴포넌트의 정의
는 해당 컴포넌트 이름
의 파일을 생성하여 관리합니다.
이는 디버깅시 파일명이 index.ts
가 아닌 해당 컴포넌트 이름
의 파일명으로 안내문구를 받을수 있어 디버깅 할 때 이점이 있습니다.
component
폴더의 index
파일과 커스텀으로 생성한 컴포넌트 폴더의 index
파일의 내용은 아래 예시와 같이 작성합니다.
// components/atoms/Container/index.ts
export { default as Container } from './Container';
// components/index.ts
export { Container } from './atoms/Container';