Redux-toolkit (Todo-List에서 사용하기)

기존에 만들었던 Todo-List를 수정했습니다.

→ 캘린더 형태의 Todo-List로, 캘린더에서 선택한 날짜를 Redux-toolkit으로 상태관리하여 
    Todo-List에서 각 개별 날짜마다 todo를 만들고, 만든 날짜에 색을 부여해 캘린더에서 한 눈에 확인할 수 있도록 했습니다.

 

 

 

💡 모든 자원을 상태관리하는 것이 좋은건가요?

→ 가장 좋은 것은 관리할 것이 없는 것이다. 그래야 코드부담이 적고, 복잡해지지 않는다.
    그래서, 내가 사용하려고 하는 자원이 많은 곳에서 사용이 되는가?
    정말 필요한 자원인가? 를 판단하여 상태관리를 하는 것이 좋다.  
    만약 해당되지 않는다면, 상태관리는 되도록 안쓰는 것이 깨끗한 코드에 도움이 된다. 하지만, 그렇다고 필요한 부분에도
    고심하여 사용하지 말라는 것은 아니다. 상태관리는 여러곳에서 쓰이는 자원을 하나의 store에서 관리해주는 아주 유용한
    친구이다. 

 

 

💡 왜 RTK(Redux-toolkit)을 사용했나요?

→ 상태관리에는 많은 라이브러리가 있습니다. 대표적인 Redux를 비롯해서 Recoil, Mobx, ReactQuery 등등 이 외에도 많은 
    라이브러리들이 나오고있는데, 이 중 Redux는 데이터의 흐름으로 인해 버그가 생기는 것을 막기 위해 등장한 라이브러리로
    모든 데이터를 단방향으로 흐르게 하기 위해 제작된 라이브러리 입니다. 따라서 그 이후, 끊임없이 오랫동안 사용된 라이브러리
    라고 할 수 있죠. 그렇기에 가지고 있는 정보가 많습니다. 또한, 많은 개발자들이 사용하는 라이브러리 이기 때문에 계속해서 업데
    이트가 되고있습니다. 하지만, 이런 Redux도 스토어 환경설정이 복잡하다는 것, 많은 패키지를 설치해야한다는 것, 보일러플레이트인
    많은 상용구를 작성해야한다는 것에 단점이 있습니다. 

    리덕스 툴킷은 이런 단점을 개선하기 위해 나온 라이브러리로, 기존 리덕스에서 복잡함을 낮추고, 사용성을 높인다는 장점이 있습니다.
    따라서 리덕스보다 더욱 간편하지만, 같은 기능을 할 수 있기에 쉽게 코드를 작성할 수 있어 사용해보았습니다.

 

 

 

 

 

TODO-LIST 속 상태관리
→ 캘린더에서 선택한 날짜를 store에 저장하여, List의 날짜를 변경하고, 해당 날짜의 todo를 구성할 수 있도록합니다.
    (해당 프로젝트는 서버없이 프론트로만 구성된 페이지입니다.)

 

1) store 구성

리덕스의 createStore를 추상화한 configureStore를 사용할 수 있습니다.

간단한 코드에도 자동으로 미들웨어 redux-thunk를 추가하고, 리덕스 개발자 도구를 활성화 시켜줍니다.

→ configureStore 안에 새로운 미들웨어를 설정하여, 잘 진행되고 있는 지 콘솔로 확인하거나, 액션 전에 원하는 동작을 수행시킬 수
    있습니다. 저는 따로 작성하지 않았습니다.
→ calendar reducer로 선택한 날짜를 상태관리 하기 위해 리듀서를 넣어줬습니다.
    상태관리 데이터가 하나가 아닌, 여러개라면 여기에 추가합니다.

 

import { configureStore } from '@reduxjs/toolkit';
import calendarReducer, {CalendarState} from './calendarReducer';


export const store = configureStore({
  reducer: {
    calendar: calendarReducer,
  },

});

 

 

 

2) Reducer 구성

createReducer가 아닌 createSlice를 사용했습니다.
createSlice 사용시 createReducer와 createAction이 내부적으로 사용되어, 따로 작성이 필요없습니다.

---

💡 그럼 createReducer와 createAction은 왜 따로 사용하나요?

→ 1) 일반적인 로직이 아닌, 로직을 커스텀할 때 따로 사용합니다. createSlice는 일반적인 로직이 아닌, 복잡한 상황에서는 해결하기
         어렵습니다. (마찬가지로 액션을 커스텀할 때도 사용합니다.)

 

→ 2)  프로젝트가 커지면, 하나의 creatSlice에 모든 상태와 리듀서를 포함하는게 비효율적입니다.
         createReducer를 사용하여, 리듀서를 여러 개로 분리했을 때 코드를 유지 관리하기 편합니다. 

---

 

→ 날짜를 선택하는 액션을 취했을 시, 해당 값을 store에 저장할 수 있도록 Slice를 구현합니다.
→ 다른 리듀서를 추가로 원하거나, 액션을 원한다면 reducer안에 추가 작성이 가능합니다. 하지만, 추가할 부분이 많다면 
    Slicer가 아닌 Reducer와 Action으로 따로 작성을 권장합니다.

 

// 액션 전 초기값
export const initialState: CalendarState = {
  selectedDate: null,
};

//액션, 리듀서
const calendarSlice = createSlice({
  name: 'calendar',
  initialState,
  reducers: {
    // 날짜 선택 액션
    SelectedDate: (state, action: PayloadAction<string>) => {
      state.selectedDate = action.payload;
    },
  },
});

 

 

 

3) useDispatch(), useSelector()

Store의 데이터의 상태를 업데이트하고, 사용합니다.

 

→ useDispatch를 사용하여, 액션이 동작한 데이터를 store에 저장합니다.
→ useSelector를 사용하여, store에 저장된 데이터를 가져옵니다.

 

// useDispatch()

const Calendar = ({ year, month }: CalendarProps) => {
  ...
  
  const dispatch = useDispatch();

  const selectDate = (date: Date) => {
    dispatch(SelectedDate(date.toString())); //리듀서의 SelectedDate
  };
  
  ...
  return(
  	...
    
  	<td  onClick={() => selectDate(date)}>
    {date}
    <td>
    
    ...
    
  )
  }
  
  //useSelector()
  
  const selectDate = useSelector((state: RootState) => state.calendar.selectedDate) as string;

 

 

 

→ 데이터 패칭 및 캐싱을 사용하지 않았지만, RTK 에도 RTK-Query가 있습니다.
     React-Query를 사용하는 것도 좋지만, RTK에서 한 번에 사용하는 방식도 유용할 것 같습니다.