TanStack Router 파일 라우팅 깔끔하게 관리하기 (feat. Private folder)

요즘 TanStack Router를 아주 잘 사용하고 있는데 이걸 선택한 이유는 크게 두가지다.
1. Type Safe하게 router 기능을 사용할 수 있다. (React Router를 쓰면서 가장 불편했던 점..)
2. 파일 기반 라우팅이 가능하다.

나는 NextJS를 많이 사용해보지 않아서 파일 기반 라우팅을 할 때에는 디렉토리 구조를 어떻게 구성해야할지 고민이 되었다.

"특정 라우트에서만 사용하는 컴포넌트나 훅은 어디 둬야 하지..?"

/policies 경로에서만 쓰는 policy-card 컴포넌트가 있다면, /policies/components/policy-card 이런 식으로 route 하위의 components 디렉토리를 만들고 싶었다.
하지만 이렇게 할 경우 components를 sub route로 인식해서 routeTree에 포함이 된다.

🤔 routeFileIgnorePrefix vs routeFileIgnorePattern

NextJS에서는 Private folder를 이용해서 _components와 같이 route로 인식하지 않게 하는 방법이 있었다. 그래서 이와 같은 기능이 있을 거라고 생각하고 문서를 찾아보니 명시적으로 라우팅에서 특정 파일/폴더를 무시하는 두 가지 옵션을 찾을 수 있었다.

1. routeFileIgnorePrefix: 파일/폴더 이름 앞에 특정 접두사(기본값: -)가 붙으면 무시하는 방식.
2. routeFileIgnorePattern: 정규식 패턴에 맞는 파일/폴더를 무시하는 방식.

처음엔 routeFileIgnorePattern을 사용하려고 했다. (components|hooks|utils) 이런 식으로 정규식을 설정 파일에 한 번만 등록해두면, 폴더 이름을 - 없이 깔끔하게 쓸 수 있기 때문이었다.

// Pattern 방식
src/routes/
└── policies/
    ├── components/ 
    │   └── policy-card.tsx
    ├── hooks/
    │   └── use-policy-filter.ts
    └── index.tsx

👍 Prefix 방식 선택 이유

하지만 나는 routeFileIgnorePrefix를 쓰기로 했고 기본값인 -를 prefix로 쓰기로 했다.

1. 명확성

폴더 이름에 -가 붙어있으면 누가 봐도, 언제 봐도 "아, 이건 라우트가 아니구나" 라고 바로 알 수 있다.

// Prefix 방식
src/routes/
└── policies/
    ├── -components/ 
    │   └── policy-card.tsx
    ├── -hooks/
    │   └── use-policy-filter.ts
    └── index.tsx

routeFileIgnorePattern 방식은 디렉토리 구조만 봐서는 얘가 라우트인지 아닌지 알 수가 없다. 항상 vite.config.ts 같은 설정 파일을 열어서 정규식을 확인해야만 한다.

2. 설정 파일 변경 최소화

routeFileIgnorePrefix 방식은 그냥 규칙에 따라 디렉토리를 만들면 된다. prefix를 바꾸지 않는다면 설정 파일을 건드릴 필요가 전혀 없다. (prefix를 _로 바꾸려고 했지만 _는 TanStack Router에서 레이아웃 파일명으로 쓰이고 있기 때문에 기본값을 선택했다.)

하지만 routeFileIgnorePattern은 나중에 utils 디렉토리가 필요해지면? constants 디렉토리가 필요해지면? 그때마다 설정 파일 열어서 정규식에 |utils, |constants를 추가해줘야 한다. 관리 포인트가 늘어나는 걸 피하고 싶었다.

결론

• routeFileIgnorePattern: 설정에 의존해야 하고 관리 포인트가 늘어난다.
• routeFileIgnorePrefix: 단순하고, 명확하며, 확장성이 좋다.