처음 만난 리덕스 (Redux) 문서
5.4 combineReducers()
지금부터는 실제로 Redux에서 Reducer를 사용하기 위해 필요한 combileReducers() 함수에 대해서 알아보도록 하겠습니다.
먼저 Redux를 사용하다보면 수많은 Action과 Reducer들이 생기게 됩니다.
그리고 이러한 Action과 Reducer는 공통된 카테고리로 모아서 분류할 수 있게 됩니다.
아래 그림처럼 말이죠.
그런데 Redux의 createStore() 함수에는 첫 번째 파라미터로 reducer를 하나만 넣을 수 있었습니다. 그래서 모든 Action들을 처리하기 위해서는 이렇게 나눠져 있는 reducer들을 하나로 합쳐야 합니다.
그럴 때 사용하는 함수가 바로 combineReducers() 입니다.
영어 단어 combine은 합치다라는 의미를 갖고 있습니다. combineReducers() 함수는 이름 그대로 여러 개의 Reducer들을 하나로 합치는 역할을 하는 함수입니다.
그리고 이렇게 모든 Reducer들이 하나로 합쳐진 것을 rootReducer라고 부르며, createStore() 함수의 첫 번째 파라미터로는 바로 이 rootReducer가 들어가게 됩니다.
앞에서 봤던 그림을 통해서 살펴보면, 이런 형태로 combineReducers() 함수의 파라미터로 모든 Reducer들이 들어가게 되고 그 결과로 rootReducer가 생성됩니다.
그리고 이 rootReducer는 입력된 모든 Reducer들이 처리하는 Action들에 대해서 처리 할 수 있게 되는 것입니다.
import { combineReducers } from 'redux';
import postReducer from './reducers/postReducer';
import commentReducer from './reducers/commentReducer';
const rootReducer = combineReducers({
post: postReducer,
comment: commentReducer,
});
export default rootReducer;
이 코드는 실제 combineReducers() 함수를 사용하는 예시 코드입니다.
여기에서는 postReducer와 commentReducer 이렇게 두 개의 Reducer를 합쳐서 하나의 rootReducer를 만들고 있습니다.
combineReducers() 함수의 파라미터 부분을 자세히 보면 JavaScript 객체 형태로 Reducer들을 넣어주고 있습니다. 그리고 여기서 post, comment 같이 객체의 키로 사용된 이름은 Redux root state객체의 키가 됩니다.
앞에서 본 것처럼 Redux Store의 내부에는 State들이 Tree형태로 구성되어 있는데, 이 때 해당 state에 접근하기 위한 키라고 이해하면 됩니다.
그리고 이 경우의 Redux State Tree를 그림으로 나타내면 이런 형태가 될 것입니다. 여기서 post와 comment가 바로 각 state에 접근하기 위한 키가 되는 것이죠.
이 그림을 머릿속에 잘 담고 다음으로 넘어가기 바랍니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.