3. [프로젝트 : 같겜(GOATGAME)]

redux에 관해 말해보고자 한다.
같겜 프로젝트를 진행할때 그리고 이전 프로젝트들을 진행하면서
굳이 redux를 사용할 생각은 없었다.

왜냐면 내가 지금 가진 기술로는 상태관리를 빡세게 해야할 프로젝트가 없었기 때문이다.

기본적인 개념은 알고있었다.

상태공유, 상태 중앙화, 컴포넌트 드릴링 감소 등등 되게 이점이 많았지만

'굳이?'라는 생각이었다.

내가 진행하는 프로젝트들은 전부 소규모 단위기 때문에
나중에 해야지.. 나중에 해봐야지..라는 핑계로 미뤄뒀던 것이다.

그러다 정말 필요성을 간절하게 느끼게된게

같겜을 진행하면서 페이징, 검색, 탭들이 다른 컴포넌트에 진입 했을때
초기화된 다는것이다.

물론 이걸 막을 방법은 Redux말고 여러개가 있겠지만,

쉽게 할 수 있는 방법은 기존 회사 다니면서 했던방식인
URL parameter에 탭, 검색, 페이징을 넣고 관리하면 되는것.

그러나 나는 이렇게 하기 싫었다.
url parameter을 사용해야하고
여러 컴포넌트에 진입하게 되면 navigate가 꼬이며
메인 페이지에서 탭, 검색을 여러번 할 경우
history에 남아 계속 뒤로가고 history를 관리 해줘야 하기 때문이다.

또한 사용자 경험에 있어서 안좋을거라 판단되어
Redux로 검색, 탭, 페이징을 관리 해주기로 한다.

결과는 성공적!
url도 깔끔해지고, 여러 페이지에 들려도 상태가 저장되있어서 사용자 경험도 증가한거 같다.

아래는 코드다.

[slice]

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface MainState {
  selectedTab: string;
  currentPage: number;
  searchInputValue: string;
}

const initialState: MainState = {
  selectedTab: 'ALL',
  currentPage: 1,
  searchInputValue : ''
};

const mainSlice = createSlice({
  name: 'main',
  initialState,
  reducers: {
    setTab: (state, action: PayloadAction<string>) => {
      state.selectedTab = action.payload;
    },
    setCurrentPage: (state, action: PayloadAction<number>) => {
      state.currentPage = action.payload;
    },
    setSearchInputValue: (state, action: PayloadAction<string>) => {
      state.searchInputValue = action.payload;
    },
  },
});

export const { setTab, setCurrentPage, setSearchInputValue } = mainSlice.actions;
export default mainSlice.reducer;

[store]

const store = configureStore({
  reducer: {
    main : mainReducer,
    user : userReducer
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

확실히 글로만 읽고 추상적으로 중앙관리 어쩌구저쩌구
글로 읽는것보다 이렇게 직접 적용해보는게 훨 씬 와닿는다.

다음번에는 적용을 더 잘 할 수 있겠다 ㅎㅎ