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

22 Dec 2023

react

리액트 네이티브 앱을 개발할 때, 리덕스를 사용하여 앱의 상태를 관리하는 것은 매우 일반적입니다. 그러나 대형 앱을 개발하다보면 리덕스 코드가 매우 길어지고 관리하기 어려워질 수 있습니다. 이러한 문제를 해결하기 위해 리덕스 모듈화가 유용하게 활용될 수 있습니다.

리덕스 모듈화란?

리덕스 모듈화는 앱의 상태 및 액션을 관리하는 리덕스 코드를 기능 또는 도메인 단위로 나누어 개발하는 것을 말합니다. 이를 통해 코드의 재사용성을 높이고 유지보수를 쉽게 할 수 있습니다.

리액트 네이티브에서의 리덕스 모듈화 방법

아래는 리액트 네이티브 앱에서 리덕스 모듈화를 구현하는 간단한 예제입니다.

1. 폴더 구조 설정

먼저 리덕스 모듈화를 위한 폴더 구조를 설정합니다. 예를 들어, 다음과 같은 구조를 사용할 수 있습니다.

src/
  |- modules/
     |- counter/
        |- actions.js
        |- reducer.js
        |- types.js
     |- user/
        |- actions.js
        |- reducer.js
        |- types.js

2. 액션 및 리듀서 모듈화

counter와 user와 같은 모듈별로 액션과 리듀서를 나누어 작성하고 해당 모듈 내에서 사용합니다.

// counter/actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// counter/reducer.js
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};
export default counterReducer;

3. 루트 리듀서에 모듈 리듀서 결합

// src/modules/index.js
import { combineReducers } from 'redux';
import counterReducer from './counter/reducer';
import userReducer from './user/reducer';

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer,
});

export default rootReducer;

4. 스토어 생성

// src/store.js
import { createStore } from 'redux';
import rootReducer from './modules';

const store = createStore(rootReducer);

export default store;

이제 리액트 네이티브 앱에서는 src/modules 폴더 내의 각 모듈에 대한 액션 및 리듀서를 서로 다른 파일에 모듈화하여 관리할 수 있습니다.

리덕스 모듈화를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있으며, 향후의 확장에 용이한 구조를 갖출 수 있습니다.

마무리

리액트 네이티브 앱에서 리덕스 모듈화는 코드 관리와 유지보수를 쉽게 할 수 있는 방법입니다. 모듈화된 구조를 잘 구성하면 앱이 성장하더라도 리덕스 코드를 효율적으로 관리할 수 있습니다.

위 예시는 모듈화 방법의 일부이며, 프로젝트의 규모와 요구에 맞게 적절히 적용해야 합니다.