포스트

2024.06.26 프로그래머스 - React Task Management 3

게시 업데이트
Preview Image
By ykdman
7 분읽는 시간

React 로 만드는 Task Management App 3

에러 : Task 삭제, 업데이트 Reducer 작동 불량

  • 처음에 작성했던 Reducer

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

      import { createSlice, PayloadAction } from "@reduxjs/toolkit";
  import { IBoardItem, IList, ITask } from "../../types/index.ts";
    
  type TBoardState = {
    modalActive: boolean;
    boardArray: IBoardItem[];
  };
    
  type TAddBoardAction = {
    board: IBoardItem;
  };
  type TRemoveListAction = {
    boardId: string;
    listId: string;
  };
    
  type TAddListAction = {
    boardId: string;
    list: IList;
  };
    
  type TAddTaskAction = {
    boardId: string;
    listId: string;
    task: ITask;
  };
    
  type TRemoveTaskAction = {
    boardId: string;
    listId: string;
    taskId: string;
  };
    
  type TDeleteBoardAction = {
    boardId: string;
  };
    
  const initialState: TBoardState = {
    modalActive: false,
    boardArray: [
    ...
    ],
  };
    
  const boardSlice = createSlice({
    name: "board",
    initialState,
    reducers: {
      addBoard: (state, { payload }: PayloadAction<TAddBoardAction>) => {
        state.boardArray.push(payload.board);
      },
      removeList: (state, { payload }: PayloadAction<TRemoveListAction>) => {
        state.boardArray = state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.filter(
                  (list) => list.listId !== payload.listId
                ),
              }
            : board
        );
      },
      setModalActive: (state, { payload }: PayloadAction<boolean>) => {
        state.modalActive = payload;
      },
      addList: (state, { payload }: PayloadAction<TAddListAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? { ...board, lists: board.lists.push(payload.list) }
            : board
        );
      },
    
      addTask: (state, { payload }: PayloadAction<TAddTaskAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.push(payload.task),
                      }
                    : list
                ),
              }
            : board
        );
      },
      removeTask: (state, { payload }: PayloadAction<TRemoveTaskAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.filter(
                          (task) => task.taskId !== payload.taskId
                        ),
                      }
                    : list
                ),
              }
            : board
        );
      },
      updateTask: (state, { payload }: PayloadAction<TAddTaskAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.map((task) =>
                          task.taskId === payload.task.taskId
                            ? payload.task
                            : task
                        ),
                      }
                    : list
                ),
              }
            : board
        );
      },
      deleteBoard: (state, { payload }: PayloadAction<TDeleteBoardAction>) => {
        state.boardArray = state.boardArray.filter(
          (board) => board.boardId !== payload.boardId
        );
      },
    },
  });
    
  export const {
    addBoard,
    removeList,
    setModalActive,
    addList,
    addTask,
    removeTask,
    updateTask,
    deleteBoard,
  } = boardSlice.actions;
  export const boardReducer = boardSlice.reducer;

    처음에 removeTask와 updateTask reducer 함수를 작성할 때,

    한가지 간과한 사항 있었는데,

    이전의 다른 reducer들에서는 state.boardArray에 재할당하는 방식이 아닌, 그저 실행이 되는 방식으로 진행했었다.

    오늘 처음 봤을 때는 차이를 잘 몰랐는데,

    자세히 확인해보니, 재할당문을 사용하지 않는 reducer는 push 같은 메소드를 사용하여, 직접 state의 상태를 변화시킬 수 있는

    방법을 사용했던 것이고,

    지금 작성했던 removeTask와 updateTask reducer는 state의 boardArray의 값을 일부분만 변경해야 하기 때문에,

    재할당 방식이 필요했던 것

    한마디로 , 정말 항목자체가 추가 되는 거라면(push 메서드 같은) reducer함수의 몸체가 실행만 되어도 되는데

    일부분을 변경하는 것은, 이전의 state + 변경 된 State의 새로운 값 상태를 적용시켜야 하기 때문에,

    state에 재할당 구문을 사용해야 한다.

  • 바뀐 state Reducer

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

      import { createSlice, PayloadAction } from "@reduxjs/toolkit";
  import { IBoardItem, IList, ITask } from "../../types/index.ts";
    
  type TBoardState = {
    modalActive: boolean;
    boardArray: IBoardItem[];
  };
    
  type TAddBoardAction = {
    board: IBoardItem;
  };
  type TRemoveListAction = {
    boardId: string;
    listId: string;
  };
    
  type TAddListAction = {
    boardId: string;
    list: IList;
  };
    
  type TAddTaskAction = {
    boardId: string;
    listId: string;
    task: ITask;
  };
    
  type TRemoveTaskAction = {
    boardId: string;
    listId: string;
    taskId: string;
  };
    
  type TDeleteBoardAction = {
    boardId: string;
  };
    
  const initialState: TBoardState = {
    modalActive: false,
    boardArray: [...],
  };
    
  const boardSlice = createSlice({
    name: "board",
    initialState,
    reducers: {
      addBoard: (state, { payload }: PayloadAction<TAddBoardAction>) => {
        state.boardArray.push(payload.board);
      },
      removeList: (state, { payload }: PayloadAction<TRemoveListAction>) => {
        state.boardArray = state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.filter(
                  (list) => list.listId !== payload.listId
                ),
              }
            : board
        );
      },
      setModalActive: (state, { payload }: PayloadAction<boolean>) => {
        state.modalActive = payload;
      },
      addList: (state, { payload }: PayloadAction<TAddListAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? { ...board, lists: board.lists.push(payload.list) }
            : board
        );
      },
      // state.boardArray 재할당
      addTask: (state, { payload }: PayloadAction<TAddTaskAction>) => {
        state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.push(payload.task),
                      }
                    : list
                ),
              }
            : board
        );
      },
      // state.boardArray 재할당
      removeTask: (state, { payload }: PayloadAction<TRemoveTaskAction>) => {
        state.boardArray = state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.filter(
                          (task) => task.taskId !== payload.taskId
                        ),
                      }
                    : list
                ),
              }
            : board
        );
      },
      updateTask: (state, { payload }: PayloadAction<TAddTaskAction>) => {
        state.boardArray = state.boardArray.map((board) =>
          board.boardId === payload.boardId
            ? {
                ...board,
                lists: board.lists.map((list) =>
                  list.listId === payload.listId
                    ? {
                        ...list,
                        tasks: list.tasks.map((task) =>
                          task.taskId === payload.task.taskId
                            ? payload.task
                            : task
                        ),
                      }
                    : list
                ),
              }
            : board
        );
      },
      deleteBoard: (state, { payload }: PayloadAction<TDeleteBoardAction>) => {
        state.boardArray = state.boardArray.filter(
          (board) => board.boardId !== payload.boardId
        );
      },
    },
  });
    
  export const {
    addBoard,
    removeList,
    setModalActive,
    addList,
    addTask,
    removeTask,
    updateTask,
    deleteBoard,
  } = boardSlice.actions;
  export const boardReducer = boardSlice.reducer;

    문법은 계속 인지해서 나쁠게 하나 없는 것 같다!

TIL, 프로그래머스
TIL programmers React SPA Redux Vanilla-extract TypeScript
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.