Redux Persist 알아보기

Redux와 Redux Persist를 사용하여 앱을 종료해도 지속되는 Store 만들기

남현욱
남현욱
Aug 14, 2019 · 4 min read
Image for post
Image for post

안녕하세요. 휴먼스케이프에서 개발자로 일하고 있는 Henry입니다. 이번 포스트에서는 Redux Persist 라이브러리를 소개하려고 합니다.

소개

React나 React Native와 같이, 혹은 단독으로 쓰일 수 있는 Redux라는 매력적인 상태 관리 라이브러리가 널리 쓰이고 있습니다.

하지만 리덕스의 Store는 앱을 종료하면 저장되어 있던 모든 상태가 없어집니다. 그래서 캐시 기능을 구현하는 또다른 장치가 필요합니다. 예를 들어 웹에서는 LocalStorage, 네이티브에서는 AsyncStorage 등을 써서 상태를 저장하고 불러쓰곤 합니다.

Redux Saga에서 토큰을 불러내는 작업 도중, AsyncStorage에서 토큰의 유무를 체크합니다.

위의 예시처럼 토큰만 저장하게 된다면 괜찮으나, 무수히 많은 정보를 저장하기에는 위와 같은 방식대로 한다면 그만큼의 불필요한 시간이 증가하게 됩니다.

이런 상황에서 Redux Persist를 사용하면 이런 작업들을 단번에 처리할 수 있습니다.

사용해보기

환경

  • Web App
  • React (or None)
  • Redux
  • Redux Persist

프로젝트 세팅

새 리액트 프로젝트를 생성합니다.

$ npx create-react-app persisted-counter
$ cd persisted-counter

그리고 필요한 라이브러리들을 설치해줍니다.

$ npm i --save redux react-redux redux-persist

기본 파일들을 삭제하고 불필요한 import 및 구문들을 제거한 뒤, 아래처럼 구조를 만들어줍니다.

Image for post
Image for post
앱의 구조

리듀서 및 스토어

우선 src/reducers/counter.reducer.js 파일에서 Counter Reducer부터 만들어줍니다.

그 후 src/reducers/index.js 파일에서 Root Reducer를 만듭니다.

리듀서가 완성되면 store/index.js 파일에서 스토어를 만들어줍니다.

컴포넌트 및 컨테이너

차례대로 Counter 및 CounterContainer를 만들어줍니다.

그 다음 index.js와 App.js를 세팅합니다.

구동되는 모습

Image for post
Image for post
새로고침을 하고도 유지되는 Counter의 상태

번외

사용 가능한 Storage

아래 링크에 Web 혹은 Native 환경에서 사용할 수 있는 Storage 목록이 있습니다.

참고용 Github Repository

이상으로 Redux Persist 소개를 마치겠습니다. 감사합니다.

Get to know us better!
Join our official channels below.

Telegram(EN) : t.me/Humanscape
KakaoTalk(KR) : open.kakao.com/o/gqbUQEM
Website : humanscape.io
Medium : medium.com/humanscape-ico
Facebook : www.facebook.com/humanscape
Twitter : twitter.com/Humanscape_io
Reddit : https://www.reddit.com/r/Humanscape_official
Bitcointalk announcement : https://bit.ly/2rVsP4T
Email : support@humanscape.io

휴먼스케이프 기술 블로그

Together, we build healthier lives.

남현욱

Written by

남현욱

세상이 아름다워지는 것을 지향하는 프론트엔드 개발자 남현욱입니다. 휴먼스케이프에서 프론트엔드 개발을 하고 있습니다.

휴먼스케이프 기술 블로그

Together, we build healthier lives.

남현욱

Written by

남현욱

세상이 아름다워지는 것을 지향하는 프론트엔드 개발자 남현욱입니다. 휴먼스케이프에서 프론트엔드 개발을 하고 있습니다.

휴먼스케이프 기술 블로그

Together, we build healthier lives.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store