사실 어제 오늘 이틀동안 주어졌던 과제를 페어분이랑 어제 몇 십분만에 끝내버려서.. 오늘은 각자 줌을 켜놓고 공부하기로 했다! 그래서 나는 오늘 리덕스의 action 과 reducer 부분을 create 메소드를 활용하면 코드를 더 간단하게 만들 수 있는 법을 공부했다. 이 방법은 redux-toolkit이라고 불린다.
먼저 내가 연습했던 코드를 보자면
// action
const ADD = 'ADD';
const DELETE = 'DELETE';
const addToDo = text => {
return {
type: ADD,
text
}
};
const deleteToDo = id => {
return {
type: DELETE,
id: parseInt(id)
}
};
// reducer
const reducer = (state = [], action) => {
switch(action.type) {
case addToDo.type:
return [{ text: action.payload, id: Date.now() }, ...state];
case deleteToDo.type:
return state.filter(toDo => toDo.id !== action.payload);
default:
return state;
}
};
텍스트를 작성하면 텍스트를 추가해주는 addToDo 액션과 삭제를 해주는 deleteToDo 액션이 있다. 그리고 그 밑에는 각각 타입에 맞게 기능을 구현해주었다.
이방법을 createAction을 통해서 코드의 길이를 줄여보는 것을 했다.
import { createAction, createReducer } from '@reduxjs/toolkit'
// 이 두줄이면 위에 있는 코드에서 action 부분을 없앨 수 있다.
const addToDo = createAction("ADD");
const deleteToDo =createAction("DELETE");
// createReducer를 활용하면 Switch문을 활용하지 않아도 된다.
const reducer = createReducer([], {
[addToDo]: (state, action) => {
state.push({ text: action.payload, id: Date.now() })
},
[deleteToDo]: (state, action) => {
return state.filter(toDo => toDo.id !== action.payload);
}
})
export const actionCreators = {
addToDo,
deleteToDo
}
확실히 코드의 길이가 많이 줄었고, 보기 더 편해졌다.
여기서 한 번 더 줄일 예정인데, 이번에는 createSlice를 활용해보았다.
const toDos = createSlice({
name: 'toDosReducer',
initialState: [],
reducers: {
add: (state, action) => {
state.push({ text: action.payload, id: Date.now() })
},
remove: (state, action) => {
return state.filter(toDo => toDo.id !== action.payload);
}
}
});
createSlice를 활용하면 이 함수안에 action과 reducer 모두 다 담을 수 있고, 적응이 된다면 훨씬 더 편해질 것 같다는 생각이 들었다.
오늘 처음 적용해본 결과, 코드도 정말 많이 짧아졌고, 구조적으로도 이해하는데 어려움은 없었지만 아직은 조금 어색하다. 그래도 잘 활용하면 좋은 것 같으니, 프로젝트를 할 때 만약 프론트엔드를 하게 된다면 적극적으로 활용해보아야 겠다.
오늘 페어분이랑 앞으로 다가올 프로젝트 기간에 대해서 이야기를 해보았다. 프로젝트 기간이 아직 3주 정도 남았지만 내 생각은 그 때 팀을 구하고, 그때가서 아이디어 협의와 구상, 코드규칙 등등을 정한다고 한다면 정말정말 시간이 부족할 것 같다고 말했다. 페어분도 프로젝트에 대해서는 처음 이야기해 본다며 생각이 많이 바뀌신 것 같다.
나는 하고 싶은 아이디어도 있고, 팀원분들과 재밌게 이야기하면서 프로젝트를 할 준비가 되어있다!! 어서 빨리 프로젝트를 하고 싶은 마음이 굴뚝 같으면서도, 막상 혼자서 리액트 리덕스를 활용하여 웹페이지 하나를 만들어 보라고 하면 정말 막막한 생각이 든다.. 물론 나는 백엔드를 지망하지만, 리액트 리덕스를 활용하여… 정말 간단한걸 하나 만들어보면서 기초를 다지고 백엔드 공부에 몰두하려고 한다!!
👊 내일의 TIW(today I Will)
데이터베이스, SQL, Schema