React Native 폴더 구조 정리

개요

컴포넌트별 역할이 분명하게 분리되고 한 페이지에 컴포넌트는 하나만 정의되도록 만들기 위한 React Native 폴더 구조 프로젝트입니다.

Nuxtjs 프로젝트의 기본 구조를 일부 참조하였으며, 웹 개발 당시의 경험을 살려 주로 이용하던 폴더 구조를 정리했습니다.

폴더 구조

• src: 환경 설정 외 모든 컴포넌트와 어플리케이션 로직들이 정리되는 폴더 구조입니다.
  • pages: screen 파일들이 정의되는 폴더입니다.
    • directory_name: pages의 하위 디렉토리 이름은 route의 이름과 동일합니다.
      • index.js(jsx|ts|tsx): 폴더 내부의 컴포넌트 정의 파일은 무조건 index로 통일합니다.
      • style.js: index.js에 적용할 StyleSheet를 정의하는 파일입니다.
      • .components: index.js에 의존적인 컴포넌트들을 정의합니다. 이 디렉토리 안에 있는 컴포넌트는 index.js에만 사용 되어야하며, API 의존성을 허락합니다.
      • child_directory: directory_name 내부의 하위 라우트 이름과 동일합니다. 만약 Home 하위에 MyPage가 있다면 디렉토리 구조는 pages/home/my-page로 구성합니다.
        • 위 구조를 계속해서 반복합니다.
  • components: 전역에서 사용되는 컴포넌트입니다. API 의존성이 절대로 허가되지 않으며, 모든 페이지에서 동일한 모습이 보여지며 역할이 동일해야 합니다.
  • plugins: 전역에서 사용할 plugin들을 정의해둔 파일입니다. App.js에서 import하는 과정만으로 모든 세팅이 끝나도록 구현해야 합니다.
  • App.js: 모든 스크린의 진입점입니다. 전역 플러그인 import, store 설정, Navigation 정의를 해당 파일에서 진행합니다.
  • routes: 모든 네비게이션이 정의되는 폴더입니다.
    • pages 폴더와 동일한 구조를 가져갑니다. (다만, Navigation에 관한 정의만 해야합니다.)

후기

막상 사용해보니 실제로 소프트웨어를 개발할 때 페이지 당 한 개의 컴포넌트만을 선언하니까 파일 하나에 부여되는 복잡성이 줄어들긴 했습니다.
하지만 React의 장점 중 하나인 Stateless Component마저 별도의 파일에 선언해야 하는 점이 단점으로 다가왔습니다.
애초에 Vue의 구조를 살리고자 사용한 디렉토리 구조라서 Stateless Component도 별도의 파일로 작성하는 것을 전제로 만들긴 했지만 많은 사람들이 React의 장점으로 꼽는 컴포넌트 정의의 간편함이 퇴색되는 구조라고 생각되었습니다.

개선 / 추가할 점

• Stateless Component의 경우는 한 페이지에 약식으로 선언해도 상관이 없을 듯 합니다.
• typescript를 반영한다면 component의 props를 type으로 정의하여 export하면 더 쉽게 사용이 가능할 듯 합니다.