Section 15 : In-App Authentication
Async Storage
: React-Native에서 로컬에 데이터를 저장하기 위한 모듈. 지금은 더 이상 사용되지 않음.
→ 이미지나 비디오 등의 미디어를 저장하기 보다는 더 작은, JSON 오브젝트 등을 저장하는 데에 좋음.
- setItem(key, value) : 기기에 데이터를 저장함.
- getItem(key) : 저장된 데이터를 가져옴.
- removeItem(key) : 저장된 데이터를 삭제함.
Navigation
→ 여태까지 스크린 전환에 사용해온 방법은 navigation prop을 받아서 navigate를 사용하는 것이었음.
⇒ navigation prop에 접근할 수 없는 곳에서 navigation 기능을 수행하기 어려움.
- 해결방법 : https://reactnavigation.org/docs/navigating-without-navigation-prop/
⇒ navigation에 관한 기능을 제공하는 별도의 모듈을 만들어서 사용.
//navigationRef.js
import { NavigationActions } from "react-navigation";
let navigator;
export const setNavigator = (nav) => {
navigator = nav;
};
export const navigate = (routeName, params) => {
navigator.dispatch(
//routeName으로 전달한 Screen으로 이동.
NavigationActions.navigate({ routeName, params })
);
};
//App.js
/* ... */
export default () => {
return (
<AuthProvider>
<App ref={(navigator) => { setNavigator(navigator) }}/>
</AuthProvider>
);
};
→ navigation prop을 받지 못하더라도 navigationRef를 import하여 navigate를 이용하는 것이 가능.
withNavigation
: navigation prop을 컴포넌트에 전달함.
→ navigation prop을 직접적으로 전달할 수 없을 때에 유용.
import { withNavigation } from 'react-navigation';
const NavLink = ({ navigation }) => {
};
export default withNavigation(NavLink);
NavigationEvents
: 화면을 띄우거나 전환할 때, 자동적으로 콜백 함수를 실행할 수 있도록 해주는 컴포넌트.
(참고 : https://reactnavigation.org/docs/4.x/navigation-events/)
- 주요 Prop
1. onWillFocus : 타 스크린에서 해당 스크린으로 이동해서 올 때 실행됨. (이동을 시작하는 즉시 실행됨.)
2. onDidFocus : 해당 스크린이 렌더 되면 그 이후 실행됨.
3. onWillBlur : 해당 화면을 떠날 때(다른 화면으로 옮겨갈 때) 실행 됨.
4. onDidBlur : 해당 화면을 떠나서 다른 화면으로 옮겨가는 것이 완료된 후 실행됨.
SafeAreaView
: 기기의 Safe Area 경계 내로 화면을 렌더링할 수 있게 해줌.
→ 현재는 iOS 버전이 11 이상인 기기에서만 사용 가능.
(참고 : https://reactnative.dev/docs/safeareaview)
import { SafeAreaView } from 'react-navigation';
→ 안드로이드 OS에서는 StatusBar를 사용해서 하란 얘기가 있는 듯...
(참고 : https://www.npmjs.com/package/react-native-status-bar-height)
React Native Maps
: React Native에서 지도를 띄울 수 있는 라이브러리.
→ 기본적으로 지원되는 라이브러리였으나 이제는 따로 설치 필요.
import MapView from 'react-native-maps';
const Map = () => {
return <MapView
style={{ height: 300 }}
initialRegion={{
//지도가 처음 렌더되었을 때 지도 상에 띄울 위치
latitude:
longitude:
latitudeDelta:
longitudeDelta:
}}
/>;
};
//Image와 유사하게 크기를 지정해줘야 화면에 나타남.
→ 기기의 OS에 따라 나타나는 지도의 종류가 다름(안드로이드 : 구글 맵, iOS : 애플 맵)
- Polyline : 지도 위에 선을 그을 수 있음.
import MapView, { Polyline } from 'react-native-maps';
const Map = () => {
return <MapView
style={{ height: 300 }}
initialRegion={{
latitude:
longitude:
latitudeDelta:
longitudeDelta:
}}
>
<Polyline
coordinates={} //latitude와 longitude로 이루어진 점들의 배열을 받아 선으로 나타냄.
/>
</MapView>;
};
※ coordinates만 넣으면 에러 발생함.
(참고 : https://github.com/react-native-maps/react-native-maps/issues/3823)
⇒ lineDashPattern={[1]} 넣어서 해결...
expo-location
: 위치 서비스를 제공하는 라이브러리. 설치 필요.
→ 사용자의 위치를 추적 가능(권한을 승인해야 함).
→ 두 종류의 Tracking을 제공함 : Foreground, Background
- Foreground Location Tracking
: 화면 상에서 어플리케이션이 돌아가고 있을 때 사용자 위치 정보를 제공.
→ 설정 및 사용이 쉬움.
- Background Location Tracking
: 사용자가 어플리케이션을 사용하고 있지 않아도 백그라운드에서 계속해서 위치 정보를 제공.
→ 좀 더 많은 전력을 사용 + 설정이 어려움.
- 위치 권한 얻기 : Location.requestForegroundPermissionsAsync() 사용
(참고 : https://docs.expo.dev/versions/latest/sdk/location/)
const start = async () => {
try {
const { granted } = await requestForegroundPermissionsAsync();
if (!granted) {
throw new Error('권한 설정 되지 않음.');
}
} catch (e) {
console.log(e);
}
};
- 사용자의 위치 추적 : Location.watchPositionAsync() 사용
await watchPositionAsync({
accuracy: Accuracy.BestForNavigation, //정확성
timeInterval: 1000, //몇 초마다 위치를 추적할지(밀리초 단위)
distanceInterval: 10 //얼마만큼의 거리마다 위치를 추적할지(미터 단위)
}, (location) => {
//location : 유저의 실제 위치
});
'공부 > React & React Native' 카테고리의 다른 글
React Testing에 대하여 (0) | 2023.11.22 |
---|---|
Notifee 정리 (1) | 2023.05.20 |
[0812~0813] React-Native 강의 정리 (0) | 2021.08.14 |
[0811] React-Native 강의 정리 (0) | 2021.08.12 |
[0810] React-Native 강의 정리 (0) | 2021.08.11 |