[Expo] Expo 기초
26 Dec 2022
Expo 기초
Expo란?
- JS 혹은 TS로 React Native를 사용하여 Android, iOS 및 웹용 범용 어플리케이션을 만들기 위한 오픈 소스 플랫폼
- 장점
- Expo CLI를 활용한 편리하고 빠른 프로젝트 설치 및 배포
- 개발 진행 중에 Android Studio나 Xcode 없이 프로젝트 확인 가능
- 인증서 및 서명 자동 관리
- 단점
- Objective-C, Swift, Java, Kotlin으로 만들어진 네이티브 모듈을 추가할 수 없다.
- 앱의 용량이 커진다. (Hello World 앱 크기 25MB)
TS(Type Scritp)란?
- MS에서 개발한 JS의 확장 언어(JS + Type)
- 장점
- 정적 타입을 지원한다.
- 컴파일 단계에서 오류를 포착할 수 있다.
- 가독성을 높이며 디버깅이 수월해진다.
- 사용법
- 현재 Boilerplate에서는 interface 형식으로 타입을 정의하여 SpringBoot 프로젝트의 DTO와 변수를 동일하게 만들어 사용
Hooks란?
- v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.
- 예시
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useLayoutEffect
- 사용법 (외부 링크)
React Navigation이란?
- React 어플리케이션의 네비게이션과 히스토리 관리 등의 기능을 쉽게 해주는 라이브러리
- Redux와도 상성이 좋기 때문에 React, React Native 개발에 용이하다.
- 종류
- Stack Navigator
- Stack 자료구조 형식으로 구현되는 Navigator
- Screen이 후입선출 형태로 구현된다. (최초의 스크린이 최하단의 스택에 쌓인다.)
- Tab Navigator
- 병렬 구조로 구성되는 Navigator
- 각각의 탭은 고유 스택을 가지고 있어 서로에게 독립적이다.
- 현재 Boilerplate에서 Bottom Tab Navigator로 구현됨
- Drawer Navigator
- Tab Navigator와 마찬가지로 병렬 구조로 구성
- 현재 Boilerplate에서 구현하지 않음
Redux란?
- JS 어플리케이션을 위한 State Container
- 데이터의 흐름이 한 방향으로 흐르며, 함수형 프로그래밍을 따르기 때문에 해당 데이터가 불변하므로 예측가능한 상태가 된다.
- View -> Action -> Dispatcher -> Store(Middleware -> Reducer) -> View
- Action
- State에 어떠한 변화가 필요할 때, Action을 발생시킨다.
- Action 객체는 반드시 Type 필드를 가져야 한다.
- Action Creator
- Action을 만드는 함수
- 단순히 파라미터를 넘겨 받아, Action 객체를 만들어 주는 역할
- Reducer
- State와 Action 파라미터를 넘겨 받아, 새로운 State를 반환하는 함수
- Reducer가 Action 파라미터의 type 값을 참고하기 때문에 Action 객체에 반드시 Type이 포함되어야 한다.
- Store
- Redux에서 한 어플리케이션당 하나씩 가지게 되는 저장소
- Store에는 현재의 어플리케이션 State와 Reducer, Dispatch, Subscribe 등의 내장 함수들이 포함된다.
- Dispatch
- Action을 파라미터로 전달하는 함수
- Dispatch 함수가 Action을 발생시킨다.
- dispatch(action)의 형태로 사용
- Subscribe
- 구독 함수는 함수 형태의 값을 파라미터로 받아온다.
- Redux를 사용할 때, 대개의 경우 구독 함수를 직접 사용하지 않는다.
- 현재 Boilerplate에서는 useSelector Hook을 사용하여 Store의 State 값을 구독한다.
Redux Thunk란?
- Redux 라이브러리를 사용할 때, 비동기 작업을 처리하기 위해 사용하는 미들웨어
- React 어플리케이션과 Redux Store 사이에 존재한다.
- Action 객체가 아닌 함수를 Dispatch할 수 있다.
- 사용법 (외부 링크)
TS & Redux
- JS가 아닌 TS로 Redux를 사용할 경우 Dispatch 함수가 발생시킬 Action 객체의 Type이 정의되어야 하는 등, 사용법이 다소 달라진다.
- 현재 구성된 TS & Redux 환경은 ‘createAsyncThunk.ts’와 ‘reducerUtils.ts’ 파일을 활용해 보다 편리하게 Redux와 미들웨어를 사용할 수 있도록 구현되었다.
- 참고 (외부 링크)