리덕스

Redux - redux-persist 세팅

이번 포스팅에서는 redux-persist 패키지를 사용해서 브라우저의 LocalStorage에 상태값을 저장해 놓고 사용하는 방법에 대해 알아보고자 한다. Redux가 세팅되어 있다는 가정 하에 redux-persist만 추가해보도록 하자. Redux를 사용해 상태 관리를 할 경우 store에 상태값을 넣어놓고 사용하게 된다. 하지만 Redux의 store는 페이지를 새로고침 할 경우 state가 초기값으로 되돌아가게 된다. 이것에 대한 대응 방안으로 LocalStorage에 저장하고자 하는 state를 저장하여 새로고침을 해도 저장공간에 있는 데이터를 Redux에 불러올 수 있는 방법을 사용한다. 그리고 이러한 역할을 수행해주는 라이브러리가 redux-persist 이다. 👉 설치 npm instal..

Redux - redux-saga

이번 포스팅에서는 redux middleware 중의 하나인 redux-saga에 대해 알아보도록 하겠다. 혹시 redux middleware에 대해 잘 모르고 있다면 아래 글을 참고하길 바란다. 2022.05.07 - [React] - Redux - redux middleware Redux - redux middleware 이번 포스팅에서는 redux middleware에 대해 알아보고 대표적인 두 라이브러리의 차이점에 대해 간략히 언급해보고자 한다. redux middleware redux-thunk & redux-saga 1. redux middleware redux-thunk.. bitkunst.tistory.com Generator 함수 redux-saga 1. Gene..

React - react-redux

이번 포스팅에서는 React에서 Redux를 사용해 전역 상태 관리를 하는 방법에 대해 알아보고자 한다. Redux react-redux로 상태 관리하기 1. Redux Redux는 JavaScipt 상태 관리 라이브러리로 React의 context API와 비슷한 기능을 수행한다. Redux를 사용하면 store라는 데이터 공간을 만든 후 해당 공간 안에서 데이터의 상태를 관리할 수 있다. Redux에는 store, action, reducer라는 세가지 개념이 존재한다. 👉 store (스토어) store는 상태가 관리되는 오직 하나의 공간이다. 컴포넌트와 별개로 store라는 공간이 있어서 그 store 안에 앱에서 필요한 상태를 담는다. 특정 컴포넌트에서 상태 정보가 필요하다면 sto..