리액트 네이티브 프로젝트 구조

: VSCode에서 프로젝트 소스를 오픈한 예시

: 위 사진은 Typescript Template 프로젝트로 생성된 앱의 폴더 구조

 

 

 

 

 

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

index.js

: React-Native 프로젝트의 시작 파일

: 이 파일을 시작으로 React-Native의 자바스크립트 코드가 번들링 됨

 

- AppRegistry.registerComponent

: 네이티브 브릿지에서 사용할 모듈을 지정

: appName = 모듈 이름

: () => App = 가장 처음으로 렌더링 될 컴포넌트

 

 

※ 번들링 (bundling)

: 기능별로 모듈화 했던 자바스크립트 파일들을 묶는 패키징의 개념

 

 

 

 

 

 

App.tsx 혹은 App.js

: 처음으로 렌더링 되는 코드

: 최상단 부모 컴포넌트

 

 

 

 

 

package.json

: 프로젝트와 관련된 모듈들이 기록된 파일

: 모듈들의 버전관리를 위해 사용

 

 

 

 

 

 

android

: 안드로이드 프로젝트가 담겨있는 폴더

: 안드로이드 네이티브 모듈을 담당

: React-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈 구현이 필요

 

- build.gradle

: 안드로이드 앱을 빌드 배포할 때에 대한 메타 데이터 파일

 

- app/src/main/res

: 안드로이드 앱의 아이콘 및 시작화면 등의 리소스들을 관리하는 폴더

 

- app/src/java/com/앱이름/MainActivity.java, MainApplication.java

: 안드로이드 네이티브 앱 메인 파일

 

 

 

 

 

 

ios

: ios 프로젝트가 담겨있는 폴더

: ios 네이티브 모듈을 담당

 

- AppDelegate.h, AppDelegate.m

: ios 앱의 메인 파일

 

- Info.plist

: ios 프로젝트 설정 파일

 

- profile

: ios의 코코라포드 라는 라이브러리에 대한 의존성 관리

 

 

 

 

 

container

: 앱의 비즈니스 로직 담당

: 앱에서 사용하는 데이터와 로직을 처리하고 props를 통해 presenter로 전달

: Text와 Input 컴포넌트는 presenter가 가져야하는 컴포넌트 이므로 container에 의존하지 않도록 주의

 

 

 

presenter (components)

: 화면을 구성하는 UI 담당

: 비즈니스 로직을 갖지 않도록 주의

: 파라미터로 props만 가지며, 비즈니스 로직이 없기 때문에 앱과 독립적이어야 함

: 다른 앱에서도 사용할 수 있어야함

 

 

 

screens

: 앱의 화면 단위 컴포넌트

: container 컴포넌트를 가짐

: 화면마다 겹치는 container 컴포넌트가 있을 경우 containers 폴더를 따로 두고 관리

 

 

 

navigation

: 화면 전환과 관련된 컴포넌트

: RootStackNavigator.js와 같은 navigator 파일을 포함

 

 

api

: 통신 관련 코드

 

 

assets

: 이미지나 폰트

 

 

hooks

: custom hook 파일

 

 

reducers

: reducer 함수

: 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수의 모임

: 액션 유형을 기반으로한 이벤트 리스너

 

 

theme

: 테마 컬러나 mixin 등 앱 전체적으로 사용할 수 있는 데이터

 

 

utils

: 앱 전체 적으로 사용가능한 간단한 함수

 

 

 

 

 

리액트 네이티브 프로젝트 예시

GitHub - nklmantey/react-native-travel-app: An app that recommmends popular tourist destinations to users based on specified cat

GitHub - nklmantey/nft-market: A simple app where users can place bids on NFTs and see current bids

GitHub - GSTJ/PegavaDatingApp: 💖 A place to get some love. Pegava is a beautiful dating app made in React Native.

GitHub - mrousavy/Colorwaver: 🎨 An app to detect color palettes in the real world - powered by VisionCamera

 

 

 

 

 

 

 

 

Refference

[React Native] 앱 개발 - 프로젝트 기본 구조

[React Native] 프로젝트 폴더 구조