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

이번 포스팅에서는 redux-actions 와 immer를 사용해 Redux에서 action들을 통한 상태 관리를 보다 쉽게 하는 방법에 대해 알아보고자 한다. 우선 VSCode 터미널에서 redux-actions 와 immer 패키지를 설치하도록 하자. npm install redux-actions npm install immer redux-actions immer 1. redux-actions redux-actions 패키지에서 제공되는 createAction 과 handleActions 함수를 이용하면 redux에서 보다 쉽게 action들을 관리할 수 있다. 👉 createAction creataAction 함수를 이용하면 action 생성을 자동화 할 수 있다. 이전 포스팅에서 re..

이번 포스팅에서는 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..

이번 포스팅에서는 redux middleware에 대해 알아보고 대표적인 두 라이브러리의 차이점에 대해 간략히 언급해보고자 한다. redux middleware redux-thunk & redux-saga 1. redux middleware redux-thunk와 redux-saga에 대해 알아보기에 앞서 redux middleware란 무엇인지에 대해 짚고 넘어가야할 필요성이 있다. redux middleware는 기본적으로 action을 dispatch 했을 때 reducer에서 이를 처리하기 전에 사전에 지정된 작업을 수행할 수 있게끔 해주는 역할을 한다. 즉, action과 reducer 사이의 중간자라고 생각하면 된다. 위의 그림은 redux middleware가 어떠한 흐름을 가지..

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