리액트 네이티브 템플릿 프로젝트 기본 폴더 구조 살펴보기

개요

리액트 네이티브 템플릿 프로젝트의 폴더 구조를 살펴보자.

기본 디렉토리들

├── __tests__
│   ├── App-test.js
├── android
├── ios
├── node_modules
├── .buckconfig
├── .eslintrc.js
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
└── yarn.lock

네이티브 구동과 관련된 폴더와 파일들

• android: 안드로이드 네이티브 구동에 필요한 파일들 (Gradle 등)
• ios: IOS 네이티브 구동에 필요한 파일들

위 두 디렉토리는 네이티브 구동에 필요한 파일들이 들어있으므로, 최대한 건들지 않는 것이 좋다. 괜히 고쳤다가 에러가 날 수 있다.

리액트 네이티브 60 버전 이하에서는 위의 폴더 안의 내용들을 직접 수정해야 하였으나, 현재는 Auto link 를 이용하여 일반적으로는 건드리지 않아도 개발이 가능하다.

설정과 관련된 파일들

...config 중 처음들어보는 파일은 대부분 네이티브와 관련된 설정정보들이다. 일반적으로 수정할 일이 없으나, 수정할 때는 매우 주의해야 한다.

• .watchmanconfig: IOS 개발 시에 파일을 감시해주는 역할을 한다.
• app.json: 앱 이름을 관리한다.
  • 다만 여기서 name 속성은 건들지 않는 것이 좋다. 이름을 바꾸게 되는 경우엔 displayName 만 바꾸는 것이 좋다.
  • 그러나, displayName 을 바꾸어도 실제로 앱 네임이 바뀌지 않는 함정카드가 있다.
• babel.config.js: React Native 에서는 Webpack dev server 대신 Metro dev server 가 바벨을 통해 앱에 쓰이는 코드들의 빌드를 도와준다.
• metro.config.js: 메트로 설정 파일 (웹팩 대신 사용한다.)
• tsconfig.json: 타입스크립트 설정 파일이다.

실제 코드와 관련된 파일

• App.tsx: 현재 메인 화면에 관련된 코드가 들어있다.
• index.js: 웹 리액트를 쓸 때처럼, 이 파일이 앱 진입점으로 사용된다.

Android 와 JS 를 연결해주는 파일

• android/app/src/main/java/com/fooddeliveryapp/MainActivity.java: 안드로이드 액티비티에서 JS 엔진을 이용해 리액트 코드를 실행해준다. 또한 bridge 로 소통도 한다.

일반적인 소스코드 폴더 구조

소스코드는 src 디렉토리 밑에 자유롭게 생성한다.

• src/assets: 이미지나 폰트 등
• src/constants: 상수와 관련된 파일
• src/pages: 페이지 단위 컴포넌트
• src/components: 기타 컴포넌트
• src/contexts: context api 모음
• src/hooks: 커스텀 훅 모음
• src/modules: 네이티브 모듈
• src/store: 리덕스 스토어
• src/slices: 리덕스 슬라이스
• types: 타입 정의

레퍼런스

인프런 - 배달앱 클론코딩