문서

React Native에서 타입 안전한 파일 기반 라우팅 구현하기

강선규 토스 · 토스 기술 블로그

AI 핵심 요약

기존 Granite의 파일 기반 라우팅은 화면을 자동 등록했지만, 화면 이동에 필요한 파라미터 타입을 명확히 정의하기 어려웠습니다. 이를 개선하기 위해 TanStack Router에서 영감을 얻어 `createRoute`와 `validateParams`를 도입하고, 검증 결과를 `Route.useParams()`의 타입으로 추론하도록 했습니다. 화면별 타입은 TypeScript 선언 병합으로 `RegisterScreen`에 모으고, 번들러 플러그인이 `/pages` 변경을 감지해 타입 등록을 생성하며 SWC AST로 `Route` export 여부를 확인합니다. 이 타입 정보를 `useNavigation`에도 연결해 경로와 파라미터 오류를 컴파일 단계에서 발견하도록 설계했습니다.

화면 파라미터 검증 함수의 반환 타입을 라우트 타입으로 활용하면 런타임 검증과 TypeScript 타입 추론을 연결할 수 있습니다.
정규 표현식으로 소스 코드를 판별하기보다 SWC AST를 분석하면 공백이나 줄바꿈에 영향을 받지 않고 export 여부를 확인할 수 있습니다.
파일 기반 라우팅의 타입 등록은 번들러 플러그인과 파일 감시를 이용해 자동화할 수 있습니다.
선언 병합으로 경로와 파라미터 타입을 중앙 등록하면 화면 이동 시 경로 오타와 잘못된 인자를 컴파일 단계에서 잡을 수 있습니다.

소개

오늘은 토스 자체 React Native 프레임워크 Granite이 어떻게 파일 기반 라우팅의 문제를 해결했는지 소개해드릴게요.

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기

컨퍼런스 SLASH

토스의 사용자와 개발자 경험을 모두 개선해준 ‘React Native’, 도입 과정은 어땠을까요? React Native를 도입하는 과정에서 토스가 마주한 기술적인 도전과 그 해결 과정을 소개합니다. 박서진 / 토스 Frontend Chapter Lead 발표 자료 👉🏻 https://bit.ly/3CePOfI 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #reactnative #사용자경험 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에...

모바일 앱 개발