RN _ App Development

Core Component들만 요리조리 잘 넣으면 근사한 앱이 만들....어지진 않을 테다.
특히 '앱'만이 가지는 특징과 개발 방법들을 이해하는 것이 중요!

오늘도 즐거운 튜토리얼 가이드.
https://www.reactnative.express/app

React Native Express

---

1. Project organiztion
완벽하게 정해진 규칙을 없지만... 대부분 프로젝트의 크기에 따라 파일 구조가 달라질 테다.

즉 규모가 작은 프로젝트는 이런 식일 테고

규모가 큰 프로젝트는 이런 식으로!

이때 유의해야 할 점은... Container Component와 Presentational Components를 분리하는 것!
Container Component는 데이터나 함수들을 인식해 Presentational Components에 props 형태로 넘겨주고,
Presentational Components는 이를 바탕으로 요소들을 반환한다.

말은 거창한데 사실 React랑 똑같은 느낌이다!!!

2. Navigation
Navigation은? 앱 하단에 위치해 스크린끼리 이동할 수 있게 만드는, 그 내비게이션 맞다!

라우팅 해서 뚝딱 만드는 거 아닌가? 하는 생각이 들지만... 이런 어려움이 있단다↓

- 각 native 플랫폼마다 다르게 작동
→ IOS는 view controllers를, Android는 activities를 사용. 따라서 기기별로 다르게 느껴질 수밖에 없는데...
RN Navigation은 JS 하나로 최대한 공통된 UI와 UX를 제공한다(고 한다)

- Native Navigation가 RN의 View와 완벽히 호환되지 않는다.

- URL 이동이 웹과 상이하다!
→ 웹은 페이지 이동이 '이용자가 URL을 직접 입력'하는 경우가 존재하지만, 앱은 그렇지 않다!
따라서 뒤로 가기 등에 있어 다양한 차이점들이 존재한다.

이러한 이유로 인해... 최적의 공통된 navigation은 존재하기 어렵다!(따라서 RN 패키지에서도 쫓겨났단다)

2-1) React Navigation
RN 프로젝트에서는 위의 문제들을 최대한 포괄할 수 있는 react-native-navigation이란 API를 이용한다!
https://reactnavigation.org/docs/getting-started/

https://reactnavigation.org/docs/getting-started/

친절한 설치 방법을 참고해보면..!

우선 패키지를 설치해주시고

expo 개발 환경이라면 이렇게 필요 라이브러리를 설치해주면 된다.

유의할 점은 Navigation의 Container와, Navigation의 형식(Navigator)을 구분한다는 점.

즉 Navigation은 Navigator를 통해 Navigation 방식(Stack, Tabs, Drawer)과 보여줄 화면(Screen)을 지정한 것!

3. Data Management
대부분의 앱에서 다룰 데이터는 → JS 객체 형태!
요 녀석들을 어떻게 다룰 것인가 하는 문제인데... → 사실 개발자 마음!

하지만 가장 대표적인 방법들로는 useReducer와 Redux가 있을 테다.

4. Persistence
로그인 기능이 있는 앱에서, 앱에 들어갈 때마다 새로 로그인을 해야 한다면? 상상만 해도 끔찍한 일이다.
또는 앱에 들어갈 때마다 로딩 창을 3초 정도나 봐야만 이용할 수 있다면? 이 역시 아주 슬픈 일.

따라서 우리는 client가 제공하는 데이터의 지속성(client-side persistence)을 유지해야 하는데...
→ RN은 대표적인 세 가지 방법을 지공한다!
- AsyncStorage : 간단한 레벨의 Key-Value 값을 저장하는 API. 손쉽게 해당 데이터를 저장하고 수정할 수 있단다.
- Redux Persist : Redux를 이용할 경우 사용할 수 있는 라이브러리.
- ReaIm : 커스텀 DB를 사용할 수 있는 라이브러리.

4-1) AsyncStorage
친숙한(?) Promise 베이스의 API. 데이터를 받아오는 과정은 역시 비동기로 이뤄진다.
자주 쓰이는 내부 함수로는...
- getItem(key: string) : key값에 해당되는 value를 받아온다. 이때 반환되는 값은 Promise!
- setItem(key: string, value: string) : value와 key를 저장! 존재하는 값일 경우 변경한다.

즉 요런 기능을 만든다고 하면...

App.js

saveName이란 함수는 onSubmitEditing을 통해 이용자가 제출한 value를 받아온다.
이 때 AsyncStorage의 setItem함수를 통해 STORAGE_KEY라는 key값에 해당 value를 저장!
동시에 setName을 통해 name 상태를 value의 값으로 업데이트해줬다.

loadName은? 호출 시 getItem함수를 통해 STORAGE_KEY라는 key값에 해당되는 value값을 가져올 테다!

Input.js

Input 컴포넌트는 사용자 입력을 받을 수 있는 TextInput 컴포넌트를 사용!
onChangeText를 통해 입력 중인 값을 받고, onSubmitEditing을 통해 제출 시를 제어해줬다.

즉... AsyncStorage를 통해 앱 내부의 간이 Store를 만든 듯한 느낌으로 이해하면 되겠다.

5. Networking
Networking은 fetch 와 XMLHttpRequest 라는 API로 이뤄져 있다.

6. Animation
일반적으로 RN에서 애니메이션은 3가지 방법을 통해 접근할 수 있다.
- Animated : 가장 보편적!
- LayoutAnimation
- react-native-reanimated

6-1) Animated
Animated를 이용해 컴포넌트에 애니메이션을 적용시켜보자.
a. Animated.Value 생성
Animated.Value(value)는 스타일에 사용될 숫자를 지정해주는 것.

b. Animated 컴포넌트 선택
Animated는 View , Text, Image에 대해 기본적인 애니메이션 속성을 제공한다.
이들을 제외한 나머지 속성에 Animated를 적용하고 싶다면?
→ const AnimatedButton = Animated.createAnimatedComponent(Button) 와 같이 감싸준 후, Animated.Value를 적용!

Text에 애니메이션 효과를 적용할 예정.

c. 애니메이션 효과 적용하기
animation 함수들을 지정해주면 된다. ex) Animated.timing
그 후 반드시 .start()를 통해 해당 함수를 작동!

useNativeDriver 사용 시 native UI단에서 효과를 제어함으로써 성능 향상이 가능해진다.
→ 대신 얘는 color, opacity, transform과 같이 레이아웃에 영향을 끼치지 않는 요소에만 사용할 수 있다!

버튼 클릭 시 Text가 서서히 나타난다!

d. Interpolate

interpolate를 통해 동시에 여러 애니메이션을 적용할 수 있다.

7. 제스처
앱의 상징! 제스처! 대표적으로 swiping, dragging, pinching이 있으시겠다.

대표적인 두 개의 속성을 통해 접근 → PanResponder / react-native-gesture-hander

7-1) Pan Responder
사실 View와 같은 대부분의 RN 컴포넌트들은 터치/클릭 이벤트를 제어할 수 있다!
하지만 이들은 대부분 low level에서 진행되기 때문에...
→ 이들을 직접 건드리지 않고, 주로 PanResponder란 API를 이용한다.

RN에서는 한 번에 오직 하나의 컴포넌트만 터치 이벤트에 반응할 수 있다.
이때 해당 컴포넌트는 전역적인 interaction lock 을 일으키는데,
PanResponder API는 이러한 lock을 일으키는 컴포넌트와 콜백 함수 등을 제어하는 역할!

PanResponder를 생성하면서 우리는 PanResponder.create(callbacksObject)를 호출할 수 있는데,
해당 함수는 View에 넘겨줄 수 있는 props를 반환한다.
우리는 컴포넌트의 생명주기에 맞는 하나의 PanResponder를 생성하길 원하므로, useRef를 이용해 결괏값을 받는다!

7-2) Gesture Handlers
또 다른 방법은 react-native-hander 란 라이브러리를 사용하는 것!
이를 통해 제스처를 감지하는 다양한 React 컴포넌트들을 이용할 수 있다.

- States
제스처는 항상 다음과 같은 상태 중 하나에 속한다!
UNDETERMINED / BEGAN / ACTIVE / END / CANCELLED / FALDED

- Events
제스처의 모든 변화(유저가 손가락을 움직이는 등의)는 event를 호출한다!
→ onGestureEvent 속성을 통해 해당 이벤트를 감지할 수 있다.