[0814 ~ 0815] React-Native 강의 정리

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/

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에서 지도를 띄울 수 있는 라이브러리.

→ 기본적으로 지원되는 라이브러리였으나 이제는 따로 설치 필요.

(참고 : https://github.com/react-native-maps/react-native-maps/blob/c80cae896c262b1df2c2ec5f220c515b8ea01693/docs/installation.md)

 

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 : 유저의 실제 위치
});