[React-Native] react-native init

0. react-native init 프로젝트 구조

• react-native init test로 프로젝트를 생성하면 다음과 같은 구조를 볼 수 있다.

 

 

• android/
  • 안드로이드 네이티브 모듈을 담당하고 있다.
  • 카카오톡으로 로그인하기처럼 react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다.

 

• ios/
  • ios의 네이티브 모듈을 담당하고 있다.

 

• node_modules
  • 프로젝트와 관련된 모듈들이다. npm을 통해 설치한 모듈이 이곳에 위치한다.

 

• App.js
  • 실제 디바이스에 표시되는 코드가 이곳에서 작성된다. App.js를 열어보면 View, Text 컴포넌트와 'Welcome to React Native!"같은 문자열이 있다.

 

• app.json
  • 프로젝트의 이름과 앱의 이름이 작성되어 있다.

 

• index.js
  • 프로젝트를 실행할 때 가장 먼저 실행되는 기점이다.
  • index.js를 열어보면 App.js를 가져와서 컴포넌트로 등록하는 것을 볼 수 있다.
  • 덕분에 우리가 프로젝트를 실행하면 App.js에 작성된 내용을 볼 수 있다.
  • 화면의 개수나 늘어난다면?
    • 화면 관리/이동은 navigation을 사용하여 구현 가능(react-navigation, react-native-navigation)
    • index.js를 navigation 사용법에 맞게 수정하면 된다.

 

• package.json
  • 프로젝트와 관련된 모듈이 기록된 파일이며 이를 통해 모듈들의 버전관리를 한다.

 

• yarn.lock
  • package.json과 비슷한 기능을 한다.