# Structure

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2FMPenGgunz14fcykkG8Ln%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-26%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.48.13.png?alt=media&#x26;token=dc8d066c-4a14-4b96-9fa4-51eb371e626a" alt=""><figcaption></figcaption></figure>

**`components`** 폴더 안에는 **단일 파일**도 사용할 수 있지만 **컴포넌트 구조가 복잡해짐에 따라 폴더 구조로 생성**할 수 있습니다.

컴포넌트 폴더를 생성할 때에는 **컴포넌트 이름과 동일한 폴더**를 생성 후, **`export default`**&#xB97C; 위한  **`index.ts`** **파일** 또한 생성합니다.

생성한 컴포넌트 폴더 내에 **`hook`**, **`util`**, **`type`** 과 같은 **다른 파일을 얼마든지 생성 가능**하며,&#x20;

더 많은 로직을 분리해야 할 때 에는 **`src` 경로의 폴더들과 동일한 구조로 폴더를 생성 할 수 있습니다.**

이 폴더들의 자세한 사항은 **각 폴더별 컨벤션 규칙**을 참조하세요.

{% hint style="info" %}
**왜 index.ts 파일을 생성하나요?**<br>

**Java Script** 에서는 **index 파일을 진입점**으로 필요한 코드를 가져옵니다.\
**그러나 `index.ts` 로 파일명을 짓게 되면 `Command + P`  로 컴포넌트를 탐색하기 어려운 점**이 있었습니다.

**때문에 검색 편의성 및 기존 단일 파일에서 folder 구조로 변경할 때 import 경로가 변하지 않는 현재의 형태로 작성하고 있습니다.**
{% endhint %}

{% hint style="info" %}
**폴더 앞에 @ 는 무엇인가요?**\
\
**비슷한 목적을 가진 파일**들을 모은 폴더입니다.

예를 들어, 비슷한 모달 UI가 여러개가 있을 때 **모달 컴포넌트를 전부 따로 관리하면 폴더가 복잡해질 수 있기 때문**에 폴더 앞에 **@을 붙여 해당 폴더의 목적을 명시**하고 모아 사용합니다.\
\
다만 아주 유사한 UI를 가진 컴포넌트라면 폴더 내에 여러 컴포넌트 대신 Props로 제어하는 것을 고려해보세요.
{% endhint %}