React Native에서 타입 안전한 파일 기반 라우팅 구현하기
강선규 · 토스 · 토스 기술 블로그
소개
오늘은 토스 자체 React Native 프레임워크 Granite이 어떻게 파일 기반 라우팅의 문제를 해결했는지 소개해드릴게요.
AI 핵심 요약
기존 Granite의 파일 기반 라우팅은 화면을 자동 등록했지만, 화면 이동에 필요한 파라미터 타입을 명확히 정의하기 어려웠습니다. 이를 개선하기 위해 TanStack Router에서 영감을 얻어 `createRoute`와 `validateParams`를 도입하고, 검증 결과를 `Route.useParams()`의 타입으로 추론하도록 했습니다. 화면별 타입은 TypeScript 선언 병합으로 `RegisterScreen`에 모으고, 번들러 플러그인이 `/pages` 변경을 감지해 타입 등록을 생성하며 SWC AST로 `Route` export 여부를 확인합니다. 이 타입 정보를 `useNavigation`에도 연결해 경로와 파라미터 오류를 컴파일 단계에서 발견하도록 설계했습니다.
- 화면 파라미터 검증 함수의 반환 타입을 라우트 타입으로 활용하면 런타임 검증과 TypeScript 타입 추론을 연결할 수 있습니다.
- 정규 표현식으로 소스 코드를 판별하기보다 SWC AST를 분석하면 공백이나 줄바꿈에 영향을 받지 않고 export 여부를 확인할 수 있습니다.
- 파일 기반 라우팅의 타입 등록은 번들러 플러그인과 파일 감시를 이용해 자동화할 수 있습니다.
- 선언 병합으로 경로와 파라미터 타입을 중앙 등록하면 화면 이동 시 경로 오타와 잘못된 인자를 컴파일 단계에서 잡을 수 있습니다.
비슷한 학습 자료
토스ㅣSLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기
SLASH · YouTube
App Router의 장점은 우리에게도 장점일까요?
이다용 · 토스 기술 블로그
ESBuild를 위한 HMR, 직접 만들기
이근혁 · 토스 기술 블로그
자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
박건영 · 토스 기술 블로그
토스가 꿈꾸는 React Native 기술의 미래
박서진 · 토스 기술 블로그
TypeScript 타입 시스템 뜯어보기: 타입 호환성
김병묵 · 토스 기술 블로그