이번 블로그에서는 npx react-native init 앱이름 으로 설치한 앱으로 생성된 폴더 안의 구조를 살펴 보기로 하겠습니다.
일단 최상위 폴더에서 필수적인 파일을 알아봅니다.
index.js : 최초 앱을 npx react-native run-android 로 수행할 경우 실행되는 파일입니다.
내용을 보면 다음과 같습니다.
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);다른건 지나치시고 보면 두번째 import 문장을 보시면 현재 폴더에 있는 App.js 파일 안의 App이라는 함수를 import 해오고 또는 App이라는 하위 폴더의 index.js 파일의 App이라는 함수를 import 한다는 것도 의미합니다.
마지막 문장을 보시면 () => App 으로 import 한 App 함수를 실행한다고 보시면 됩니다.
그리고 App.js는 이제 본격적으로 코딩을 하는, 시작하는 페이지이지만 통상적으로는 위와 같이 src 하위 폴더를 만들고 그 곳에 index.js를 만들고 그 안에 Main같은 이름의 함수가 들어 있는, 첫 페이지를 만드는 것이 일반적인 관례인 듯 합니다. 그렇게 하기 위하여 App.js 파일 상단에 하기와 같이 import 구문을 넣어 PATH를 지정해 주겠지요.
import Main from './src'
그리고 package.json 파일의 경우 중간에 dependencies 오브젝트를 보시면 내가 설치한 추가 라이브러리 목록을 볼 수 있습니다.
한참 프로그램을 하다보면 설치한 npm 라이브러리들이 서로 충돌하고 설치 후 앱 실행이 안되기도 하고 그래서 결국 새로 앱을 만들어 다시 사용하는 경우가 있는데 이럴때 이 폴더에 들어가 내가 그동안 설치했던 라이브러리들을 확인하고 얼른 새로 설치할 수 있습니다.
나머지 파일들은 그냥 무시하고 이제 android 폴더를 들여다 봅시다. 안드로이드 앱 개발시에는 여기가 핵심이겠습니다.
android\build.gradle
android\app\build.gradle
android\app\src\java\com\앱이름\MainActivity.java
android\app\src\java\com\앱이름\MainApplication.java
위 네가지 파일은 실제로 각종 라이브러리를 설치할 때 함께 수정을 해주어야 하는 경우가 종종 있습니다. 일단은 중요한 파일인 것만 기억하고 넘어갑니다.
android 폴더 안의 파일들은 안드로이드 앱을 구성하기 위한 설정 파일들이 있고 또 나중에 앱 아이콘이나 SPLASH 그림파일도 들어갑니다. SPLASH 파일은 앱이 처음 실행될 때 나오는 그림입니다. 또 앱을 apk나 aab파일로 저장하여 배포/복사시에 이곳에 저장이 됩니다.
참고로 안드로이드 앱을 설치했을 경우 앱 이름의 경우 아래 경로의 파일에 저장되어 있습니다.
\android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">앱이름</string>
</resources>
앱 아이콘의 경우 조금 복잡합니다.