[React-Native] AsyncStorage

narinn-star·2023년 1월 14일
0
post-thumbnail

AsyncStorage를 사용하기 전에, 기초를 조금 닦아보자!

React로 웹 프로젝트를 했을 때는 세션으로 로그인을 구현했어서, token에 대한 공부를 따로 할 필요가 없었다.
이번에 React-Native를 사용하면서 JWT 토큰 보관을 해야해서AsyncStorage를 공부하게 됐다.

Recoil을 사용해 비동기적으로 불러온 데이터를 저장하긴 하지만, 앱을 닫았을 때 이 데이터들을 저장하기 위해 사용한다.

처음부터 차근차근 해보자!

Promise?

비동기적 작업을 편하게 관리하도록 도와주는 객체
Promise를 사용하면 콜백 함수로 비동기 작업을 관리하다 발생할 수 있는 일을 방지할 수 있다.

동기적 작업
특정 작업이 끝날때까지 다음 작업을 시작하지 않고 대기하다가 기존 작업이 끝나면 다음 작업을 시작 (block 상태)

비동기적 작업
특정 작업이 끝나지 않아도 다음 작업을 수행

만드는 방법

const promise = new Promise((resolve, reject) => {
	// ...
})

resolve : 작업이 성공했을 때 호출되는 함수
reject : 작업이 실패했을 때 호출되는 함수

then 메서드
Promise 객체에서 resolve된 결과를 then 메서드를 통해 사용할 수 있다.

async? await?

Promise를 더 쉽게 사용할 수 있도록 해주는 키워드!

사용 방법
함수 선언할 때 앞에 async 붙이기

async function example(ex) {
	// ...
}

Promise 앞부분에 await 붙이기

async function res() {
	let result = 1;
    result = await example(result);
}

res.then(
	result => {
    	console.log(result);
    }
)

Promise, async, await는 AsyncStorage만이 아니라 비동기 작업을 처리할 때 사용되기 때문에 잘 알아두면 좋을 것 같아 다시 한 번 짚어보았다.

이제 진짜 AsyncStorage 시작 !!

AsyncStorage

설치하기

yarn add @react-native-async-storage/async-storage

setItem

특정 값을 저장할 때 사용하는 메서드

const save = async() => {
	try{
    	await AsyncStorage.setItem('key', 'value');
    } catch (e) {
    	//오류 예외 처리
   	}
}

값은 문자열 타입이어야 하고, 객체 또는 배열 타입을 저장하려면 JSON.stringify 함수를 사용한다.

await AsyncStorage.setItem('key', JSON.stringify(obj));

getItem

특정 값을 불러올 때 사용하는 메서드

const load = async() => {
	try{
    	const value = await AsyncStorage.getItem('key');
        ...
    } catch (e) => {
    	//오류 예외 처리
    }
}

이 또한 값은 문자열 타입이며 객체 또는 배열을 불러오려면 JSON.parse 함수를 사용한다.

const obj = JSON.parse(value);

이 외에도 여러 API가 존재한다.
그건 요기 참고 -> https://reactnative.dev/docs/asyncstorage

일단 내가 사용할 것은 setItem으로, 로그인을 했을 때 토큰 저장을 하는 것이고 다음에 SplashScreen에서 getItem으로 다시 값을 가져와 로그인 여부를 확인하려한다.

일단 로그인은 구현이 되어있는데 AsyncStorage에 토큰 값을 저장해보자!

AsyncStorage에 값을 저장해보자!

Login/index.tsx 일부

<Button
	style={{ marginBottom: 24 }}
	label="Login"
	onPress={() => {
		login(password, username).then((v: any) => {
			if (v.status == 200) {
				AsyncStorage.setItem("AccessToken", v.data.token); // 토큰 저장
				navigation.navigate("Home");
			}
		});
	}}
/>;

AccessToken이라는 Key값과 토큰을 저장했다.
로그도 찍어봤는데 잘 넘어가고, 잘 담겨있는 것을 확인할 수 있었다.
마지막에 navigation까지 Home으로 넘겨주면 끝!

getItem은 SplashScreen 만드는 부분에서 사용해 볼 예정이다.

https://0biglife.tistory.com/entry/%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-token-%EC%A0%80%EC%9E%A51

"리액트 네이티브를 다루는 기술"을 참고하여 작성하였습니다.

0개의 댓글