기본적인 Redux 사용방법에 대해서 알아봤다. 이제 이 Redux를 좀 더 편하게, 그리고 가볍게 사용할 수 있는 @reduxjs-toolkit 패키지에 대해 알아보고자 한다. 1. 다운로드 npm install @reduxjs/toolkit yarn add @reduxjs/toolkit 둘 중에 편한 것으로 하자. 그리고 기존에 Redux가 설치되어있는 프로젝트라면 package.json에 들어가서 Redux를 삭제하자. 왜냐면 @reduxjs-toolkit에는 Redux의 모든 게 다 들어가 있기 때문이다. 2. 적용 이제 필요한 곳에 사용해보자. 여기서는 createSlice와 configureStore을 사용할 것이다. 예시는 마찬가지로 counter이다. 이 gif를 보면 증가, 5만큼 증가,..

이번에는 Context API의 대안으로 떠올랐던 Redux의 기본 흐름에 대해서 살펴보려고 한다. 가장 쉬운 예시인 숫자 증가/감소로 설명하겠다. 1) Redux를 불러온다. const redux = require('redux') 2) 스토어를 만든다. const store = redux.createStore(""리듀서 이름"") 리덕스 라이브러리에 노출되는 방법이다. 파라미터로 리듀서가 들어가는데, 이는 어떤 리듀서가 스토어를 바꾸는지 스토어가 알아야 하기 때문이다. 3) 스토어에 들어갈 리듀서 함수를 작성한다. // 1 const counterReducer = (state = { counter: 0 }, action) => { // ... } // 2 const initialState = { cou..

공부한 것, 배운 것, 메모할 것 리덕스 라이브러리 이해하기 복습 제대로 하고 리액트 라이브러리에 리덕스 적용 Node.js - REST API 복습 제대로 하고 쿠키와 세션 이해하기 Redux 액션: 변화가 필요할 때 발생하는 것. 액션 생성 함수를 통해서. 액션 생성 함수: 액션 객체를 만들어줌. 매번 추가하기 번거로울 수 있으므로 함수로 만들어서 관리 -> 리듀서 리듀서: 변화를 일으키는 함수 스토어: 프로젝트에 리덕스를 적용하기 위해서 만들고, 그 안에 현재 app 상태 및 리듀서가 들어감. 디스패치: 스토어의 내장 함수 중 하나. 액션을 발생시키는 개체라고 생각하면 편함. 액션 객체로 파라미터를 넣어서(ex. dispatch(error)) 호출. 디스패치 호출 시 스토어가 리듀서 함수를 실행시켜..