왠지 이제 점점 뒤쳐지는 것 같은 느낌이 들어서 마음이 슬퍼😭 매일 열심히 했다고 생각했는데 왜 그럴까...? 정말 속상하다... 그치만 다 울었으면 이제 할 일을 하자😵💫
😭Redux 기초 복습
진짜 엄청나게 간단한 카운터 앱을 만들어 보았다. 처음부터 다시 시작하는 마음으로 useState 사용하는 것부터 다시 해보았다. useState는 이제 머 걍 눈감고도 한다 그러고 나서 redux를 사용하여 코드를 수정해보았다.
index.js에 Provider로 store를 전달해준 뒤 필요한 파일들을 만든다.
- configStore.js
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";
const rootReducer = combineReducers({
counter: counter,
});
const store = createStore(rootReducer);
export default store;
- counter.js
const ADD_NUM = "ADD_NUM";
const MINUS_NUM = "MINUS_NUM";
export const addNum = () => {
return { type: ADD_NUM };
};
export const minusNum = () => {
return { type: MINUS_NUM };
};
const initialState = {
number: 0,
};
const counter = (state = initialState, action) => {
switch (action.type) {
case ADD_NUM:
return {
number: state.number + 1,
};
case MINUS_NUM:
return {
number: state.number - 1,
};
default:
return state;
}
};
export default counter;
initialState를 useState쓸 때 처럼 단순히 0으로 설정하면 문제가 될 수 있다. Redux의 상태는 일반적으로 객체 형태로 관리되며, 여러 개의 상태 속성을 추가하거나 구조를 유연하게 변경할 수 있기 때문이다. 따라서initialState는 'number' 속성을 가진 객체로 정의한다.
initialState가 number 이외에 여러 가지 속성들을 다루고 있다면, 리듀서를 만들 때 spread operator(...)를 사용, 기존 객체를 복사하여 필요한 부분에 대한 변경 사항을 업데이트 할 수 있다. 그러나 지금처럼 counter 하나의 속성만 갖고 있다면 굳이 ...state를 해 줄 필요가 없겠다.기초적인 부분인데 이제서야 이 내용을 스스로 찾아보고 이해하고 있다
액션 타입 정의, 액션 생성자 함수를 쓰는 데에는 이제 어느 정도 익숙해진 것 같다. 오늘도 중괄호 안에 return을 쓰지 않아서 한참 오류가 뜨긴 했지만 가장 어려운 부분은 역시 리듀서를 만드는 부분이다.
다시 한번 정의해보면, counter는 state=initialState와 action을 인자로 받는 함수이며, 함수이기 때문에 반환값(return)이 있다. 반환값은 initialState와 동일한 형태를 가진다.
또한 불변성을 지켜주기 위해 기존의 state에 직접 변경사항을 주어서는 안된다. Object.assign, spread operator 등의 방법으로 새로운 객체를 만들어 반환해야 한다.
🫡Redux-toolkit
여기까지 왔으니 이제 새로운 것을 시도해보자.
Reduix-toolkit은 기존의 Redux를 더 편리하게 사용하기 위해 개량한 것이다. 따라서 기존의 구조와 패러다임은 모두 동일하며, module 파일을 작성하는 부분이 크게 개선되었다고 할 수 있다.
그치만 이제 막 redux 사용법을 익혔는데 또 새로운 내용이라니
yarn add react-redux @reduxjs/toolkit
Redux-toolkit을 설치하면 준비 끝
- configStore.js
import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counter";
const store = configureStore({
reducer: {
counter: counter,
},
});
export default store;
기존의 combineReducer -> roodReducer -> createStore -> store export 단계가
configureStore -> store export 로 대폭 간소화되었다.
- counter.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = { number: 0 };
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
addNum: (state, action) => {
state.number = state.number + 1;
},
minusNum: (state, action) => {
state.number = state.number - 1;
},
},
});
export default counterSlice.reducer;
export const { addNum, minusNum } = counterSlice.actions;
Redux-toolkit의 slice를 통해 기존의 액션 타입, 생성자 함수, 리듀서를 각각 따로 정의해 주던 방식이 대폭 간소화되었다. createSlice()가 받는 객체는 name, initialState, reducers로 구성되어 있다. 이 reducers안에 작성된 addNum, minusNum을 컴포넌트에서 액션명으로 사용할 수 있다😲😲
👍🏻Redux-toolkit을 사용할 때의 장점
- Retux-toolkit의 immer 기능
기본적으로 내장된immer라이브러리를 통해 불변성을 유지할 때 해왔던 번거로운 작업을 최소화하고, 가독성이 높고 간결한 코드를 작성할 수 있다.
const todosSlice = createSlice({
name: "todos",
initialState,
reducers: {
addTodo: (state, action) => {
state.push(action.payload); // <--- 기존 state에 push를 해도 괜찮다!
},
...
})- Redux Devtools
Redux 앱을 디버그하고 모니터링하는 데 사용되는 도구이다. state 상태 변화를 시각적으로 추적하고, 액션의 히스토리를 확인하며, state의 변경을 실시간을 모니터링 할 수 있다.
Chrome, Firefox와 같은 주요 브라우저의 확장 프로그램으로 제공된다.
- Flux 패턴
페이스북에서 개발한 웹 애플리케이션 아키텍쳐 패턴으로, 복잡한 상태 관리를 위한 단방향 데이터 흐름을 강조한다. 이 Flux 구현체들 중 좀 더 단순화하고 사용을 간편화한 것이 그 동안 공부해왔던 Redux이다.
Flux 패턴을 통해 애플리케이션 state 변화를 예측하고, 효율적으로 관리할 수 있다.
