Async Storage with React Native, Redux

너무나 당연하지만 네이티브 앱에서는 웹 앱과는 달리 세션을 자동으로 핸들링 해주지 않는다.

원래 웹에서는 세션 기반의 인증을 할 때,
브라우저가 자동으로 서버의 응답에서 세션 id를 추출하여 로컬 스토리지에 저장하고
추후 인증이 필요한 요청을 할 때 세션 id를 요청 헤더에 넣어서 인증을 가능하게 해준다.
하지만 네이티브 앱에서는 이런 핸들링 로직을 직접 구현해야 한다.

문제
패스포트를 통과해서 유저의 세션 id가 쿠키를 통해 프론트로 전달되더라도 프론트에서는 별도로 처리할 로직이 없기 때문에, 추후 요청 시에도 세션 id가 없어 세션이 유지가 안된다.

방법

• 따라서 서버로 부터 받은 응답에서 세션 id를 추출해 저장하고,
• 저장한 세션 id를 추후 요청 시에 쿠키에 담아 서버로 보내주는 로직을 만들어야 한다.

이때 Async Storage를 이용해서 세션 id를 저장하고 추후 요청 시에 조회해서 꺼내오려고 한다.
나는 redux-saga를 이용하고 있기 때문에, 이쪽 로직에서 처리해주어야 했다. 하지만 좀처럼 레퍼런스를 찾기가 어려웠다.

어싱크 스토리지의 사용 방법은 공식문서 상에 정말 간단하게 나와 있다.

(*리액트 네이티브 커뮤니티에서 개발한 어싱크 스토리지는 현재 이용이 안되는 듯 하다.
대신 아래 리액트 네이티브에 기본으로 포함되어 있다가 분리해 나온 패키지를 이용한다.)

https://react-native-async-storage.github.io/async-storage/docs/usage

-- 작성중