React Native 앱의 폴더 구조-JS 튜토리얼-php.cn

React Native 앱의 폴더 구조

WBOY

풀어 주다： 2024-07-18 11:05:01

원래의

1054명이 탐색했습니다.

Folder Structure of a React Native App

소개

React Native는 JavaScript와 React를 사용하여 모바일 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. React Native로 개발을 시작하려면 일반적인 React Native 프로젝트의 구조를 이해하는 것이 중요합니다. 각 폴더와 파일에는 특정한 목적이 있으며, 해당 역할을 알면 프로젝트를 보다 효율적으로 관리하고 탐색하는 데 도움이 됩니다. 이 글은 기본 디렉터리(루트 디렉터리, android/ 폴더, ios/ 폴더)의 내용과 목적에 초점을 맞춰 React Native 앱의 폴더 구조에 대한 포괄적인 개요를 제공합니다.

루트 디렉토리

React Native 프로젝트의 루트 디렉터리에는 프로젝트의 종속성, 구성 및 진입점을 관리하는 필수 파일과 폴더가 포함되어 있습니다.

주요 파일 및 폴더

node_modules/: npm 또는 Yarn을 통해 설치된 모든 종속성과 하위 종속성을 포함합니다. 일반적으로 이 폴더를 직접 터치할 필요는 없습니다.
package.json: 프로젝트 종속성, 스크립트 및 기타 메타데이터를 나열합니다. 프로젝트 종속성 및 스크립트를 관리하는 데 중요합니다.
package-lock.json 또는 Yarn.lock: 설치된 종속성 버전을 잠그고 다양한 환경에서 일관성을 보장합니다.
index.js: React Native 앱의 진입점으로, 일반적으로 앱의 주요 구성 요소를 등록합니다.

핵심 폴더

android/: 기본 Android 코드를 작성하거나 수정해야 하는 경우 필요한 기본 Android 코드와 구성 파일이 포함되어 있습니다.
ios/: 기본 iOS 코드를 작성하거나 수정하는 데 필수적인 기본 iOS 코드 및 구성 파일이 포함되어 있습니다.
app/ 또는 src/: 구성 요소, 화면, 서비스 등 JavaScript/TypeScript 코드의 기본 폴더인 경우가 많습니다. 여기에는 대부분의 앱 코드가 있는 곳입니다.

공통 하위 폴더(app/ 또는 src/ 내부)

컴포넌트/: 재사용 가능한 UI 구성요소로, 앱의 다양한 부분에서 UI 요소를 구성하고 재사용하는 데 도움이 됩니다.
화면/: 다양한 화면이나 보기를 나타내는 구성 요소로, 탐색 및 개별 화면을 더 쉽게 관리할 수 있습니다.
navigations/: 앱의 탐색 구조를 정의하는 데 사용되는 탐색 구성 및 구성 요소입니다.
assets/: 모든 정적 리소스를 정리된 상태로 유지하는 이미지, 글꼴 및 기타 정적 자산입니다.
redux/(상태 관리를 위해 Redux를 사용하는 경우): 애플리케이션의 전역 상태를 관리하기 위한 작업, 감소기 및 저장소 구성입니다.
스타일/: 구성요소와 화면 전반에 걸쳐 사용되는 공통 스타일로, 일관된 디자인을 유지하고 스타일 관리를 단순화합니다.

구성 및 유틸리티 파일

.babelrc 또는 babel.config.js: Babel 구성 파일, Babel이 코드를 트랜스파일하는 방법을 정의합니다.
.eslintrc.js: ESLint 구성 파일, 프로젝트에 대한 린팅 규칙을 설정합니다.
.prettierrc: 더 예쁜 구성 파일, 코드 형식 지정 규칙을 구성합니다.
metro.config.js: React Native에서 사용하는 JavaScript 번들러인 Metro 번들러에 대한 구성 파일입니다.
.gitignore: git 저장소에서 무시할 파일과 디렉터리를 지정합니다.

안드로이드/폴더

android/ 폴더에는 Android 기기나 에뮬레이터에서 React Native 앱을 빌드하고 실행하는 데 필요한 모든 기본 Android 코드와 구성 파일이 포함되어 있습니다.

주요 파일 및 폴더

build.gradle: 모든 하위 프로젝트/모듈에 공통적인 구성 옵션을 추가할 수 있는 최상위 빌드 파일입니다.
gradle.properties: Gradle 빌드 시스템의 구성 속성
gradlew 및 gradlew.bat: 각각 Unix 기반 시스템과 Windows 시스템에서 Gradle 명령을 실행하는 스크립트.
settings.gradle: 프로젝트가 의존할 수 있는 외부 라이브러리나 추가 모듈을 포함하여 프로젝트의 모듈을 지정합니다.

하위 폴더

앱/

build.gradle: 앱과 관련된 구성 및 종속성을 포함하는 앱 모듈용 빌드 파일입니다.
src/: 앱의 Android 부분에 대한 소스 코드가 포함되어 있습니다.
- 메인/:
- AndroidManifest.xml: Android 빌드 도구, Android 운영 체제 및 Google Play에 앱에 대한 필수 정보를 설명합니다.
- java/: 앱의 진입점인 MainActivity.java 또는 MainActivity.kt를 비롯한 Java 또는 Kotlin 소스 파일이 포함되어 있습니다.
- res/: 레이아웃, 드로어블 파일(이미지), 문자열, 앱에서 사용하는 기타 XML 파일과 같은 앱 리소스가 포함되어 있습니다.
- assets/: 글꼴이나 기타 바이너리 파일 등 앱에 필요한 원시 자산 파일을 저장합니다.
- jniLibs/: 앱이 의존하는 사전 컴파일된 네이티브 라이브러리(.so 파일)가 포함되어 있습니다.

그래들/

wrapper/: Gradle 빌드 시스템에 도움이 되는 파일이 포함되어 있습니다.
- gradle-wrapper.jar: Gradle 래퍼용 JAR 파일로, 사용자가 Gradle을 설치하지 않고도 프로젝트를 빌드할 수 있습니다.
- gradle-wrapper.properties: 사용할 Gradle 버전과 기타 속성을 지정합니다.