리액트 네이티브 앱을 개발할 때, 상태 관리를 위해 리덕스를 사용하는 것이 일반적입니다. 이 글에서는 리액트 네이티브 앱에서의 리덕스 프로젝트 구조를 설계하는 방법에 대해 알아보겠습니다.

1. 폴더 구조

리덕스 프로젝트를 구성할 때, 보통 다음과 같은 폴더 구조를 사용합니다.

project/
└── src/
    ├── actions/
    ├── reducers/
    ├── store/
    └── components/

• actions: 액션 타입과 액션 생성자 함수를 정의합니다.
• reducers: 리듀서 함수를 정의합니다.
• store: 스토어를 생성하고, 필요한 미들웨어를 적용합니다.
• components: 리덕스와 연결된 컴포넌트들을 포함합니다.

이러한 폴더 구조를 사용하면, 코드를 유지보수하기 쉽고, 새로운 기능을 추가하기도 편리합니다.

2. 액션과 액션 생성자 함수

액션은 상태 변화의 요청을 나타내는 객체이며, 액션 생성자 함수는 액션을 만드는 함수입니다. 예를 들어, 다음과 같이 액션 타입과 액션 생성자 함수를 정의할 수 있습니다.

// 액션 타입 정의
export const ADD_TODO = 'ADD_TODO';

// 액션 생성자 함수
export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  };
}

3. 리듀서

리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. 예를 들어, 다음과 같이 리듀서 함수를 정의할 수 있습니다.

// 초기 상태 정의
const initialState = {
  todos: []
};

// 리듀서 함수
function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        todos: [...state.todos, action.text]
      };
    default:
      return state;
  }
}

4. 스토어

스토어는 애플리케이션의 상태를 보관하고, 상태에 접근할 수 있게 해주는 객체입니다. 스토어를 생성하고 미들웨어를 적용하는 코드는 다음과 같이 작성할 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

5. 컴포넌트

리덕스와 연결된 컴포넌트를 작성할 때는 connect 함수를 사용하여 스토어의 상태나 액션 생성자 함수에 접근할 수 있게 합니다.

import { connect } from 'react-redux';

class TodoList extends React.Component {
  // ...
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  };
}

export default connect(mapStateToProps)(TodoList);

위의 예제에서는 mapStateToProps 함수를 사용하여 스토어의 상태를 해당 컴포넌트의 속성으로 매핑하고 있습니다.

리액트 네이티브 앱에서 리덕스 프로젝트를 구성하는 방법에 대해 간략하게 알아보았습니다. 이를 참고하여, 효율적이고 재사용 가능한 코드를 작성해보세요.