React Native 앱 개발하기 (1)

최근 사내 모바일 개발 플랫폼을 React Native로 구현하기로 결정되면 관련해서 공부가 필요하다고 느꼈네요. 깊이 있는 테스트를 위해서 React Native로 간단한 앱을 개발해보면서 어떻게 구동되는지에 대해 이해해보려합니다.

개발 환경 설정

React Native는 Node.js 환경에서 실행되기 때문에 Node.js 설치가 필요하다. 설치 후 터미널에서 node -v와 npm -v 명령어로 설치를 확인한다.

React Native는 iOS와 Android 플랫폼 개발을 함께 할 수 있기 때문에 기본적으로 각 플랫폼 빌드를 위한 환경이 구성되어야한다.

JDK, Android Studio, Xcode 등...

React Native CLI

• React Native 프로젝트를 생성하고 관리하는 명령줄 도구입니다.

npm install -g react-native-cli

설치 확인 및 프로젝트 초기화

모든 필요한 도구를 설치한 후, 다음 단계를 따라 React Native 프로젝트를 초기화할 수 있습니다:

• 터미널을 열고 프로젝트를 생성할 디렉토리로 이동합니다.
• 다음 명령어를 실행하여 새 React Native 프로젝트를 생성합니다:

npx react-native init MyNewProject

• 프로젝트 생성이 완료되면, 생성된 프로젝트 폴더로 이동합니다:

cd MyNewProject

• iOS 개발의 경우 (Mac 사용자만 해당):

cd ios && pod install && cd ..

 

• 앱을 실행해봅니다

Android: npx react-native run-android
iOS: npx react-native run-ios

 

이렇게 하면 React Native 개발 환경이 설정되고, 첫 프로젝트를 시작할 준비가 완료됩니다. 각 단계에서 문제가 발생하면 React Native 공식 문서의 트러블슈팅 가이드를 참조하시기 바랍니다.

 

초기화 시 생성되는 파일 및 디렉토리

프로젝트가 초기화되면 다음과 같은 파일 구조가 생성됩니다:

MyNewProject/
├── __tests__/
├── android/
├── ios/
├── node_modules/
├── .buckconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.js
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
└── README.md

 

각 파일과 디렉토리의 역할을 설명하면 아래와 같습니다.

 

1. __tests__/:
   1. Jest를 사용한 테스트 파일을 포함하는 디렉토리입니다.
   2. 기본적으로 App-test.js 파일이 포함되어 있습니다.
2. android/:
   1. Android 앱 관련 파일들이 포함된 디렉토리입니다.
   2. 안드로이드 스튜디오로 열 수 있는 프로젝트 파일들이 있습니다.
3. ios/:
   1. iOS 앱 관련 파일들이 포함된 디렉토리입니다.
   2. Xcode로 열 수 있는 프로젝트 파일들이 있습니다.
4. node_modules/:
   1. npm을 통해 설치된 모든 의존성 패키지들이 저장되는 디렉토리입니다.
5. .buckconfig:
   1. Buck 빌드 시스템을 위한 설정 파일입니다.
6. .eslintrc.js:
   1. ESLint 설정 파일로, 코드 스타일과 에러를 체크합니다.
7. .gitattributes:
   1. Git 저장소의 속성을 정의하는 파일입니다.
8. .gitignore:
   1. Git이 추적하지 않을 파일들을 지정하는 파일입니다.
9. .prettierrc.js:
   1. Prettier 코드 포맷터의 설정 파일입니다.
10. .watchmanconfig:
    1. Watchman 설정 파일로, 파일 변경 감지에 사용됩니다.
11. App.js:
    1. 앱의 메인 컴포넌트가 정의된 파일입니다.
    2. 초기 UI와 로직이 여기에 작성됩니다.
12. app.json:
    1. 앱의 이름, 표시 이름 등 기본 설정을 포함하는 JSON 파일입니다.
13. babel.config.js:
    1. Babel 트랜스파일러의 설정 파일입니다.
14. index.js:
    1. 앱의 진입점(entry point)입니다.
    2. AppRegistry.registerComponent()를 호출하여 앱을 등록합니다.
15. metro.config.js:
    1. Metro 번들러의 설정 파일입니다.
16. package.json:
    1. 프로젝트의 메타데이터와 의존성 정보를 포함하는 파일입니다.
17. README.md:
    1. 프로젝트에 대한 기본적인 정보와 설명을 제공하는 마크다운 파일입니다.

이러한 파일 구조는 React Native 프로젝트의 기본 뼈대를 형성합니다. 개발자는 이 구조를 기반으로 앱을 개발하고 확장해 나갈 수 있습니다. 특히 App.js는 초기 개발 시 가장 먼저 수정하게 될 파일로, 앱의 메인 로직과 UI를 구현하는 시작점이 됩니다.