RN 프로젝트 파일 구조에 대해

이번 글에서는 React Native에서 처음 프로젝트를 생성할 때 초기 파일 구조에 대해 정리해보고자 한다.

 

프로젝트 생성하기

 

VScode에 npx react-native init --version [버전] [파일멸] 을 입력하여 프로젝트 생성하기 -> 버전에 따라 어떤 버전은 Android SDK버전과 호환이 안될 수도 있고 자동으로 app.js가 포함된 파일들이 생성되지 않을 수도 있음

 

가장 좋은건 공식사이트에 들어가서 프로젝트 생성 코드를 그대로 치는 것

--> npx @react-native-community/cli@latest init [파일명]

 

 

 

 

 

 

프로젝트를 정상적으로 만들었다면 위의 사진처럼 app.tsx나 app.js파일이 섞인 프로젝트가 생성되어 있어야 함

(app.js와 app.tsx파일이 없이 만들어지는 경우가 많아 애먹었음)

 

그럼 대략적인 파일 구조에 대해 알아보도록 하자.

 

App.tsx 또는 App.js : 앱의 메인 React 컴포넌트로, 앱의 다른 모든 컴포넌트를 렌더링 하는 엔트리 포인트 역할의 파일

(기본적으로 App.tsx 또는 App.js가 에뮬레이터 초기화면으로 연동되어 있음)

 

Index.js : 로, JavaScript 코드와 네이티브 플랫폼 코드를 연결해 주는 앱 메인 입구 같은 파일

 

app.json:  앱에 대한 메타데이터를 포함하고, 주로 Expo 및 React Native CLI에 의해 사용되는 파일

                  ( 메타데이터 : 다른 데이터를 설명해 주는 데이터이다. )

 

node_modules : package.json에 따라 설치되며 npm 의존성과 관련된 모듈들이 담 파일

 

android: Android 앱을 빌드하기 위한 소스 파일과 설정이 포함된 파일 (Gradle 설정) 

 

ios : iOS 버전의 앱을 빌드하기 위한 파일 ( Xcode )

 

. gitignore: git 작업 중 git에서 제외하고 싶은 파일들을 설정하는 파일

 

README.md : 마크다운 파일로 프로젝트에 대한 개요, 설정 지침 또는 다른 중요한 정보를 제공하는 파일 (메모장 같은 거)

 

jest.config.js : JavaScript 테스팅 프레임워크 Jest의 설정 파일

 

Gemfile : 주로 iOS 의존성을 관리해 주는 파일

 

tsconfig.json : TypeScript의 설정 파일로, 주로 프로젝트의 컴파일러 옵션을 관리해주는 파일

 

package.json 및 package-lock.json : 프로젝트와 관련된 의존성과 스크립트, 버전 등을 관리해주는 파일

 

metro.config.js : JavaScript 번들러 Metro와 관련된 설정 파일

 

babel.config.js : JavaScript 컴파일러 Babel과 관련된 설정 파일

 

watchmanconfig: 파일 시스템의 변경을 감지하는 Facebook 개발 도구 Watchman관 설정 파일

 

. prettierrc.js: 코드 포맷터 역할을 하여 프로젝트 전체의 코드 스타일을 일관되게 유지시켜 주는 Prettier관련 파일

 

. eslintrc.js: JavaScript 코드에서 일관성을 유지하고 버그를 방지하기 하기 위한  ESLint 관련 설정 파일

 

 

 

 

에뮬레이터와 연결하기

 

app.js파일이 담긴 폴더로 경로를 cd명령어를 이용하여 이동한 후, cmd창에 'npm install'을 입력하기 

 

PS C:\Users\zoroz\source\JS_repos\KKTour\konkukTour> npm install

 

 

cmd 창에 'npx react-native run-android' 입력하기

 

PS C:\Users\zoroz\source\JS_repos\KKTour\konkukTour> npx react-native run-android

 

 

 

 

+왜 처음 애뮬레이터를 연결하면 App.js화면에 연동되는 걸까?

 

 

먼저 앱의 메인입구 파일인 Index.js 파일을 살펴보도록 하자.

index.js 파일

 

 

 

해당 파일을 살펴보면 'APPRegisrty'를 react-native로부터 import 해서 새로운 컴포넌트를 등록하고 있는데, 그 컴포넌트는 app.json파일의 'name'값을 'AppName'이라는 이름으로 새로운 컴포넌트를 등록 중이며, 2번째 인자를 통해 초기 렌더링을 'App'으로 import중인 App.js파일을 새로운 컴포넌트의 처음렌더링화면으로 지정해 놓았기 때문이다.

(아래 사진 참고)

 

 

 

app.json파일