[React Native] React Native Cli 프로젝트 초기 설정

개요

프로젝트가 마무리 될때까지 짧게는 2-3개월이 걸리는데, 2-3개월 정도 지나면 처음 프로젝트 설정을 어떻게 했었는지 잊어버리곤 한다. 큰 틀에서는 기억이 나도 개인적으로 맞는 프로젝트 폼, 형식, 유의할 점들이 기억이 나지 않아 같은 실수를 반복했던 것 같다. React Native Cli 프로젝트 기본 세팅을 기록해서 다음 프로젝트 세팅에 참고하도록 하자.

1) 프로젝트 생성

npx react-native init [프로젝트 이름]

2) 자주 사용하는 라이브러리 설치

각각 추가 설치 방식이 있기 때문에 각각 포스트로 다루도고 링크를 연결하도록 하자.

axios

react-native-elements

@react-native-community/async-storage

react-navigation

3) 폴더 구조

폴더 구조와 기본 설정은 추후 따로 포스트에서 다루도록 하자.

src > api, components, context, hooks, screens, utils

component > element, item, form, style

screen 내부에서도 스크린별로 폴더 나눌 수 있음

4) 폴더별 기본 설정

api > yelp.js, jsonServer.js

component > element > 사용할 각종 컴포넌트 세팅

context > createDataContext

screens > 사용할 화면 세팅

utils > navigationRef

5) 네비게이션(App.js) 설정

필요한 화면과 flow 짜기

큰 틀부터 짠다. loading → login → main

navigation 설계 참고

6) 화면 & 데이터 flow 설계

사실 설계하지 않아도 화면 하나하나 구성하고 나중에 분리하면 개발이 되긴 한다. 다만 그렇게 하면 내 경험상 십중팔구 끼워맞추기 개발이 됬던 것 같다. 먼저 가설을 세우고 목표한 바가 개발됬는지를 확인하는 방식으로 가자.

• 화면 flow 버튼 하나로 화면 그리고 flow 테스트. 어떤 flow로 흘러갈 것인지는 화면이 그려져 있으니 여기서 결정할 일은 아님
• 화면 그리면서 component 분리 ‘화면 컴포넌트’ 참고
• 화면 그리면서 데이터 flow 분석 ‘데이터 분석’ 참고
• 기능별 flow 분석 실제 각 기능이 작동했을 때 완료되기까지 어떻게 데이터, 화면이 흘러가는지