인프런 강의 중 맛집 지도앱 만들기 (React Native + NestJS)에 대한 강의를 수강하던 중 지도에 대한 기능이 어느정도 구현되었는데, 너무 많은 라이브러리가 추가되어 이들을 하나씩 명확히 짚고 넘어가려고 한다. 하나씩 짚고 넘어가보자.
Package.json
현재 "5-7. 환경변수 설정하기" 기준으로 설치된 라이브러리는 다음과 같다.
"dependencies": {
"@react-native-community/geolocation": "^3.3.0",
"@react-native-community/slider": "^4.5.2",
"@react-native-masked-view/masked-view": "^0.3.0",
"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.20",
"@tanstack/react-query": "^5.50.1",
"axios": "^1.7.2",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-config": "^1.5.2",
"react-native-date-picker": "^5.0.4",
"react-native-encrypted-storage": "^4.0.3",
"react-native-gesture-handler": "^2.13.4",
"react-native-image-crop-picker": "^0.41.2",
"react-native-maps": "1.14.0",
"react-native-permissions": "^4.1.5",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.4",
"react-native-screens": "^3.27.0",
"react-native-vector-icons": "^10.1.0"
},각 라이브러리의 역할에 대해 우선 알아보자.
- Geolocation web spec을 확장한 React Native용 Geolocation API 모듈로, iOS, Android, Web에서 이용가능하다.
- 24년 7월 20일 기준 지난 주 까지 업데이트가 진행된 것으로 보아 유지보수가 활발하게 이루어지고 있는 것 같다.
- 현재 위치를 가져오거나, 위치가 변경될 때마다 호출되는 콜백 함수 등을 제공한다.
- RN 프로젝트 내부에서 지도를 사용하고 있고, 현재 위치 정보를 가져오고 싶다면 유용하게 사용할 수 있을 것 같다.
import Geolocation from '@react-native-community/geolocation';
Geolocation.getCurrentPosition(
info => {
const {latitude, longitude} = info.coords;
setUserLocation({latitude, longitude});
setIsUserLocationError(false);
},
() => {
setIsUserLocationError(true);
},
{
enableHighAccuracy: true,
},
);- 값 범위에서 단일 값을 선택하는 데 사용되는 RN 컴포넌트이다.
- 슬라이더 기능이 필요하다면 직접 구현하기 보다 해당 라이브러리를 통해 시간을 단축할 수 있을 것 같다.
<Slider
value={score}
onValueChange={onChangeScore}
step={1} // 슬라이더 단계 값
minimumValue={1} // 최소 값
maximumValue={5} // 최대 값
minimumTrackTintColor={pink_700} // 버튼 왼쪽 트랙 색상
maximumTrackTintColor={gray_300} // 버튼 오른쪽 트랙 색상
thumbTintColor={gray_100} // 그립 색상
/>- iOS, Android에서 지원한다. (Web X)
- 해당 라이브러리는
@react-navigation/stack라이브러리를 추가할 때 주로 함께 설치되는데, 헤더에 UIkit 스타일 애니메이션을 사용하기 위해 필요한 라이브러리이다. (현재 강의 프로젝트에서는 필요없는 거 같은데 왜 설치되있지? 지워야겠다.)
- 제스처를 통해 열고 닫을 수 있는 서랍을 제공하는 라이브러리
- 해당 라이브러리를 사용하기 위해서는
react-native-gesture-handler와react-native-reanimated라이브러리를 설치해야만 한다.
import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
<Drawer.Navigator>
<Drawer.Screen name={...} component={...} />
<Drawer.Screen name={...} component={...} />
<Drawer.Screen name={...} component={...} />
</Drawer.Navigator>- React Native에서 네비게이터를 사용하여 앱의 탐색 구조를 만들고 싶을 때 가장 먼저 설치하는 라이브러리
- 탐색 구조(예: React의 React Router, Next의 App Router)를 만들기 위해 유용한 라이브러리이다. (유용한 보다는 필수적인이 더 맞는 거 같다.)
import { NavigationContainer } from '@react-navigation/native';
function App() {
return (
<NavigationContainer>
{Stack, Drawer 등의 네비게이션 위치}
</NavigationContainer>
)
}- 앱 내에서 화면들이 스택처럼 전환할 수 있는 방법을 제공하는 라이브러리
- 현존하는 대부분의 앱이 화면을 스택처럼 전환하는 방법을 사용하고 있는데, 해당 기능을 구현하기 위해 아주 유용한 라이브러리이다.
- Drawer랑 사용 방법은 비슷하다.
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
<Stack.Navigator>
<Stack.Screen name={...} component={...} />
<Stack.Screen name={...} component={...} />
<Stack.Screen name={...} component={...} />
</Stack.Navigator>- 비동기 상태 관리를 위한 Very Very 강력한 라이브러리
- 서버 상태를 관리하기 위해 주로 사용되는데, 쿼리를 이용해 캐싱, 무효화, 리페치, 등을 활용할 수 있는데 공식 문서가 정말 잘 정리되어 있다.
- 필자는 주로 React Query를 이용해 서버 상태를 관리하고, Zustand를 이용하여 전역 상태를 관리하는 방법을 선택한다.
- node.js와 브라우저를 위한 promise 기반의 HTTP 비동기 통신 라이브러리이다.
- HTTP 통신을 위한 내장 객체 fetch가 존재하지만, 필자는 axios를 주로 사용한다. 차이점은 아래 링크를 참고하면 좋을 것 같다.
- Axios vs. Fetch API: Selecting the Right Tool for HTTP Requests
- iOS, Android 및 Windows를 지원한다.
- RN에서 자바스크립트 코드에 환경 변수를 노출하는 모듈
- RN에서는 브라우저 환경에서 동작하는 게 아니기에 웹과 같은 방법(
process.env)로 접근이 불가능하고, RN 애플리케이션을 네이티브 코드로 컴파일하는 번들링 과정에 환경 변수를 직접 포함하는 것은 쉽지 않은 방법입니다. -> 라이브러리 사용 권장 - 환경 변수를 등록 이후에 반드시 앱을 다시 빌드하고 실행해야 적용되니 이 점에 유의하자.
import Config from 'react-native-config';
console.log(Config.TEST)- Android와 iOS 기본 날짜 선택기 구성 요소를 사용하기 위한 라이브러리
- 사용자 정의 가능하고, 여러 언어 지원
- 간편하게 사용 가능
import DatePicker from 'react-native-date-picker';
<DatePicker
mode="date"
confirmText={BLACK} // 텍스트 색상
date={date}
onDateChange={onChangeDate}
locale="ko"
/>- SharedPreferences(Android) 및 KeyChain(iOS) 주변 RN wrapper를 사용해 AsyncStorage에 대한 안전한 대안을 제공
- 민감하지 않은 정보(UI theme 등)는 앱에서 AsyncStorage에 저장해도 무관하지만 민감한 데이터는 안전한 장소에 저장 -> Android's
EncryptedSharedPreferencesand iOS'Keychain - 앱이 지워질 때까지 데이터 보존된다.
import EncryptedStorage from 'react-native-encrypted-storage';
const setEncryptStorage = async <T>(key: string, date: T) => {
await EncryptedStorage.setItem(key, JSON.stringify(date));
};
const getEncryptStorage = async (key: string) => {
const storedData = await EncryptedStorage.getItem(key);
return storedData ? JSON.parse(storedData) : null;
};
const removeEncryptStorage = async (key: string) => {
const data = await getEncryptStorage(key);
if (data) {
await EncryptedStorage.removeItem(key);
}
};- RN에서 최고의 터치 기반 경험을 구축하기 위한 네이티브 기반의 제스처 관리 API를 제공하는 라이브러리
- JS 응답자 시스템에 의해 제어되는게 아닌 네이티브 UI 스레드에서 인식되고 추적되기 때문에 응답성이 향상되고 부드럽고 빠른 UX 제공
- React Navigation을 설치할 때 Stack, Drawer에서 해당 라이브러리를 설치하는 이유가 네이티브 기반의 제스처를 인식하고 관리해주기 위함이다.
- 따로 설정은 필요없고, 진입점에서 선언만 해주면 된다.
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => App);- 카메라, 비디오 등을 지원하는 iOS/Android 이미지 선택기 라이브러리
const onSelectImage = () => {
ImagePicker.openPicker({
mediaType: 'photo',
multiple: true,
includeBase64: true,
maxFiles: 5,
cropperChooseText: '완료',
cropperCancelText: '취소',
})
.then(images => {
const formData = getFormDataImages(images);
uploadImages.mutate(formData, {
onSuccess: data => {
addImageUris(data);
},
});
})
.catch(error => {
if (error.code === 'E_PICKER_CANCELLED') {
return;
}
});
};- MapView, Marker, Polygon, Circle 등 다양한 컴포넌트 API를 제공해주는 라이브러리
- on Poi Click기능을 구글 맵에서만 적용되기 때문에, 이 점에 유의하자.
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
<MapView provider={PROVIDER_GOOGLE}>
<Marker coordinate={...} />
</MapView>- iOS, Android 및 Windows에서 RN을 위한 통합 권한 API를 제공하는 라이브러리
- 프로젝트에서 필요한 권한들을 설정하고, 사용자에게 요청할 수 있다.
- iOS의 경우 권한에 대한 설명을 구체적으로 작성하지 않으면 스토어 심사에서 거절당할 수 있으니
Info.plist에서 꼼꼼하게 작성하자. - iOS와 Android의 권한 흐름이 조금 다르니 이 부분도 유의해서 살펴보고 적용하도록하자.
- React Native 애니메이션 라이브러리로 제스처 기반 상호 작용과 관련해 더 큰 유연성을 허용한다.
@react-navigation/drawer라이브러리를 설치할 때 drawer 상호 작용을 조금 더 유연하게 이끌어내기 위해 함께 설치한다.
- iOS와 Android에서 안전 영역을 처리하기 위한 라이브러리
- iOS에는 특히 X 버전부터 노치(Notch)가 등장하게 되었기 때문에 안전 영역에 대한 처리가 확실히 이루어져야 한다.
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
const inset = useSafeAreaInsets();
<SafeAreaView>
<Pressable style={{ top: inset.top || 20 }}>
<Text>버튼인 척</Text>
</Pressable>
</SafeAreaView>- iOS, Android, tvOS, visionOS, Windows, Web 다 지원한다.
@react-navigation/native를 설치할 때 함께 설치하는데, 해당 라이브러리는 RN에 네이티브 네비게이션 컨테이너 컴포넌트를 노출하는 것을 목표로 한다. (즉, 독립 실행용으로 설계된 게 아니다)
- react native에서 사용할 수 있는 아이콘들을 제공해주는 개발자의 귀찮음을 덜어주는? 라이브러리
- 미니 프로젝트를 진행하고 있는데, 아이콘을 구하기 귀찮다면 해당 라이브러리를 사용해보자. 아이콘은 https://oblador.github.io/react-native-vector-icons/ 에서 확인할 수 있다.
- 아이콘들이 그룹별로 묶여있기 때문에 잘 살펴보고 아래와 같이 적용하면 된다.
import Ionicons from 'react-native-vector-icons/Ionicons';
<Ionicons name="menu" color={WHITE} size={24} />
Happy Day 😊❣️ >> bangdori.kr