https://jwdevv.tistory.com/37

Redux Toolkit의 createSlice 함수에 대해 자세히 설명해 드리겠습니다.

1. Slice란?
   Slice는 Redux 상태의 한 부분을 관리하는 로직을 의미합니다. 이는 초기 상태, 리듀서 함수, 그리고 해당 상태 조각과 관련된 액션 생성자를 포함합니다.

2. createSlice의 역할:
   createSlice는 이러한 slice를 쉽게 생성할 수 있게 해주는 함수입니다. 이 함수는 초기 상태, 리듀서 함수들의 객체, 그리고 slice 이름을 받아 자동으로 액션 생성자와 액션 타입을 생성합니다.

3. createSlice를 사용한 이유와 장점:

   a. 보일러플레이트 감소:

   • 기존 Redux에서는 액션 타입, 액션 생성자, 리듀서를 별도로 정의해야 했습니다.
   • createSlice를 사용하면 이 모든 것을 한 번에 생성할 수 있어 코드량이 크게 줄어듭니다.

   b. 불변성 관리 용이:

   • createSlice는 내부적으로 Immer 라이브러리를 사용합니다.
   • 이로 인해 개발자가 상태를 직접 변경하는 것처럼 코드를 작성할 수 있으며, Immer가 자동으로 불변성을 유지해줍니다.

   c. 타입 안정성:

   • TypeScript와 함께 사용할 때, createSlice는 자동으로 타입을 추론하여 타입 안정성을 제공합니다.

   d. 액션 타입 자동 생성:

   • slice 이름을 기반으로 고유한 액션 타입을 자동으로 생성합니다.
   • 이는 액션 타입 문자열의 중복을 방지하고 오타로 인한 버그를 줄여줍니다.

   e. 리듀서 로직 단순화:

   • 각 리듀서 함수는 특정 액션에 대해서만 동작하므로, switch 문을 사용할 필요가 없어집니다.

   f. 모듈화 및 구조화:

   • 관련된 상태와 로직을 하나의 slice로 묶어 관리할 수 있어 코드의 구조화와 모듈화가 용이해집니다.

예시:

import { createSlice } from '@reduxjs/toolkit'

const filterSlice = createSlice({
  name: 'filter',
  initialState: {
    selectedRegions: [],
    selectedBusinessTypes: [],
    rentMin: '',
    rentMax: '',
    areaMin: '',
    areaMax: '',
  },
  reducers: {
    setFilter: (state, action) => {
      return { ...state, ...action.payload };
    },
    resetFilter: (state) => {
      return initialState;
    },
  },
});

export const { setFilter, resetFilter } = filterSlice.actions;
export default filterSlice.reducer;

이 예시에서 createSlice를 사용함으로써, 필터 관련 상태와 액션을 한 곳에서 관리하고, 코드를 간결하게 유지하며, 자동으로 액션 생성자(setFilter, resetFilter)를 만들어냈습니다.

---

리덕스 도입 이유

1. 상태 관리의 복잡성 증가:

   • 앱이 커지면서 여러 컴포넌트에서 같은 데이터를 사용하고 수정해야 하는 경우가 많아졌을 것입니다.
   • 예를 들어, AiRecommend와 Ranking 컴포넌트가 같은 필터 데이터를 공유해야 하는 상황입니다.

2. 프롭 드릴링(Prop Drilling) 문제:

   • 데이터를 여러 단계의 컴포넌트를 거쳐 전달해야 하는 상황이 발생했을 수 있습니다.
   • 이는 코드를 복잡하게 만들고 유지보수를 어렵게 합니다.

3. 상태 업데이트 로직의 중앙화:

   • 필터 설정이나 추천 결과 같은 중요한 상태 업데이트 로직을 한 곳에서 관리하고 싶어졌을 것입니다.

4. 성능 최적화:

   • 큰 규모의 상태 변경을 효율적으로 처리하고, 불필요한 리렌더링을 줄이고 싶었을 수 있습니다.

5. 디버깅의 용이성:

   • 상태 변화를 추적하고 디버깅하는 것이 어려워졌을 수 있습니다. 리덕스는 상태 변화를 명확하게 추적할 수 있게 해줍니다.

6. 서버 상태와 클라이언트 상태의 분리:

   • React Query와 함께 사용함으로써, 서버에서 가져온 데이터(예: 추천 결과)와 클라이언트 상태(예: 필터 설정)를 효과적으로 분리하고 관리할 수 있게 되었습니다.

7. 코드의 구조화 및 확장성:

   • 앱의 규모가 커지면서, 상태 관리 로직을 더 체계적으로 구조화하고 싶어졌을 것입니다.

8. 팀 협업:

   • 팀 프로젝트에서 일관된 상태 관리 패턴을 적용하여 협업을 용이하게 하고 싶었을 수 있습니다.

리덕스는 이러한 문제들을 해결하는 데 도움을 줄 수 있습니다. 특히 AiRecommend와 Ranking 컴포넌트 사이에서 필터 상태를 공유하고 관리하는 데 유용할 것입니다. 이를 통해 코드의 구조가 개선되고, 상태 관리가 더 효율적으로 이루어질 수 있습니다.