Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

차근차근

[React-Native] react-native init 본문

대학교/FE

[React-Native] react-native init

SWKo 2020. 4. 2. 13:19

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과 비슷한 기능을 한다.

'대학교 > FE' 카테고리의 다른 글

[React & RN] Styled Components  (0) 2020.04.14
[React Hooks] Hooks (2)  (0) 2020.04.07
[Redux] Pure Redux: To Do List  (0) 2020.04.01
[Redux] Pure Redux: Counter  (0) 2020.03.30
[React Hooks] Hooks (1)  (0) 2020.03.21
Comments