reducer와 reducers의 차이

React에서 reducer (단수)와 reducers (복수)의 차이

---

특히 Redux Toolkit의 createSlice를 사용할 때 이 두 단어가 자주 나와 헷갈릴 수 있습니다.

이것은 **요리법(레시피)**에 비유해서 설명 가능 합니다.

---

---

reducer (단수) - '하나의 요리법' 또는 '주방장'

---

무엇인가요?: 

reducer (단수)는 '상태를 어떻게 바꿀지' 정의하는 하나의 큰 함수를 말합니다.  

이 함수는 (현재 상태, 액션)을 받아서 새로운 상태를 반환하는 역할을 합니다.

어떤 역할인가요?: 

Redux의 핵심 개념이자, React의 useReducer Hook에서 사용하는 그 reducer 함수를 의미해요. 

즉, **"이 재료를 가지고 이런 주문이 들어오면, 이렇게 요리해서 새로운 결과물을 낸다"**라는 규칙을 가진 '하나의 요리법' 또는 '주방장'입니다.

예시: 

counterReducer처럼, 카운터 상태를 관리하는 전체 로직을 담은 하나의 함수입니다.

---

---

2. reducers (복수) - '세부 요리 지침서' (Redux Toolkit의 createSlice 안에서)

---

무엇인가요?: 

reducers (복수)는 **Redux Toolkit의 createSlice 함수 안에서 사용되는 '속성 이름'**입니다. 

이 reducers 속성 안에는 해당 slice(Redux 상태의 특정 부분)의 상태를 변경하는 **여러 개의 '작은 요리법'들(즉, reducer 함수들)**을 정의할 수 있습니다. 

어떤 역할인가요?: 

createSlice는 Redux 상태 관리를 더 쉽고 효율적으로 할 수 있도록 돕는 도구입니다. 

reducers라는 객체 안에 각 '액션(주문)'별로 상태를 어떻게 변경할지 세분화된 함수들을 넣어둡니다.

비유: 

reducers (복수)는 '특정 요리(Slice)를 만들기 위한 **여러 가지 세부 요리 지침들'**을 모아놓은 목록이나 객체라고 생각할 수 있어요. 

예를 들어, '파스타 만들기'라는 큰 요리법 안에 '면 삶기', '소스 만들기', '토핑 올리기' 등의 **작은 지침(함수)**들이 각각 정의되는 거죠.

---

---

핵심 차이와 관계

---

**reducer (단수)**는 **'개념'이자 '하나의 함수'**입니다. 

상태를 변화시키는 핵심 로직을 담당하는 그 자체를 말해요.

**reducers (복수)**는 createSlice를 사용할 때 **slice 내에서 '여러 개의 작은 reducer 함수들을 정의하기 위한 '특정 객체 속성의 이름'**입니다.

---

---

예시 (Redux Toolkit의 createSlice 사용):

---

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

const counterSlice = createSlice({
  name: 'counter', // 이 slice의 이름
  initialState: { value: 0 }, // 초기 상태
  reducers: { // <-- 여기에 'reducers' (복수)를 씁니다!
    increment: (state) => { // 'increment'라는 이름을 가진 하나의 'reducer' (단수) 함수
      state.value += 1;
    },
    decrement: (state) => { // 'decrement'라는 이름을 가진 또 다른 하나의 'reducer' (단수) 함수
      state.value -= 1;
    },
    // ... 더 많은 작은 reducer 함수들
  },
  // extraReducers: (builder) => { /* 외부 액션 처리 */ }
});

// 이렇게 정의된 'reducers' 객체 안에 있는 'increment'와 'decrement'가
// 각각 하나의 reducer 함수로 사용될 수 있습니다.
export const { increment, decrement } = counterSlice.actions;

// 최종적으로 외부로 export될 때,
// counterSlice.reducer는 'reducers' 안에 정의된 모든 작은 reducer 함수들을
// 하나로 합쳐진 거대한 'reducer' (단수) 함수가 됩니다.
export default counterSlice.reducer;

js

 

reducer는 '하나의' 상태 변경 로직을 가진 함수 자체를 지칭하고, reducers는 createSlice 안에서 그 '여러 개의 작은' reducer 함수들을 모아두는 '컨테이너'의 이름이라고 생각하시면 됩니다!

---