[react] 리액트 네이티브에서의 리덕스 모듈 분리하기

22 Dec 2023

react

리액트 네이티브 앱을 개발할 때, 리덕스(Redux)를 사용해 전역 상태를 관리하는 것은 일반적인 방법입니다. 그러나 상태와 관련된 액션과 리듀서가 많아질 수록 코드가 길어지고 복잡해지는데요. 이 문제를 해결하기 위해 리덕스 모듈을 분리하는 방법에 대해 알아보겠습니다.

1. 리덕스 모듈이란?

리덕스 모듈이란, 액션, 액션 생성자, 리듀서를 한 곳에 모아놓은 파일을 말합니다. 이를 통해 특정 기능에 따른 액션과 상태를 하나의 모듈로 묶어서 사용할 수 있습니다.

2. 리덕스 모듈 분리하기

먼저, 기능에 따라 디렉토리를 생성하여 액션과 리듀서를 분리합니다. 다음은 간단한 카운터 예제를 통해 리덕스 모듈을 어떻게 분리하는지 알아보겠습니다.

2.1 카운터 리덕스 모듈 생성하기

modules 디렉토리를 생성하고, 그 안에 counter.js 파일을 만듭니다.

// modules/counter.js

// 액션 타입 정의
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

// 액션 생성자 함수
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

// 초기 상태
const initialState = {
  count: 0,
};

// 리듀서 함수
function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREASE:
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

export default counter;

2.2 루트 리듀서에서 모듈 추가하기

루트 리듀서에서 앞에서 생성한 카운터 모듈을 추가합니다.

// rootReducer.js

import { combineReducers } from 'redux';
import counter from './modules/counter';

const rootReducer = combineReducers({
  counter,
  // 다른 모듈들 추가 가능
});

export default rootReducer;

2.3 스토어 생성하기

마지막으로 스토어를 생성할 때, 루트 리듀서를 적용합니다.

// store.js

import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(rootReducer);

export default store;

이렇게 하면 카운터에 관련된 액션과 상태를 한 파일에 모듈화하여 사용할 수 있습니다.

3. 리액트 네이티브에서의 활용

리액트 네이티브 앱에서 위에서 생성한 스토어를 사용하기 위해, Provider 컴포넌트로 앱을 감싸고, connect 함수를 사용하여 컴포넌트와 리덕스를 연결합니다.

// App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import CounterContainer from './containers/CounterContainer';

const App = () => {
  return (
    <Provider store={store}>
      <CounterContainer />
    </Provider>
  );
};

export default App;

위와 같이 리액트 네이티브에서 리덕스 모듈을 분리하고 사용하는 방법을 통해 코드의 가독성을 높일 수 있으며, 유지보수가 용이해질 수 있습니다.

위 내용들을 따라하면 리액트 네이티브 앱에서 리덕스를 모듈화하여 사용할 수 있습니다.

참고 자료: 리액트 네이티브 공식 문서, 리덕스 공식 문서