🏗️Structure

component 폴더의 구조입니다.

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

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

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

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

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

왜 index.ts 파일을 생성하나요?

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

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

폴더 앞에 @ 는 무엇인가요? 비슷한 목적을 가진 파일들을 모은 폴더입니다.

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