redux

Redux - redux-persist 세팅

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

Redux - redux-actions / immer

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

Redux - redux middleware

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