📑 파일 생성 규칙

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';