[react] 리액트 네이티브에서의 리덕스 상태 중앙 저장소

22 Dec 2023

react

리액트 네이티브는 모바일 애플리케이션을 개발하기 위한 인기 있는 프레임워크 중 하나입니다. 리액트 네이티브 애플리케이션을 개발할 때 리덕스를 사용하여 상태 관리를 할 수 있습니다. 리덕스를 사용하면 애플리케이션 상태를 중앙 저장소로 관리하여 다양한 컴포넌트에서 쉽게 접근할 수 있습니다.

1. 리덕스 설정

리액트 네이티브 애플리케이션에서 리덕스를 설정하는 것은 일반적인 리액트 웹 애플리케이션에서 설정하는 방법과 유사합니다.

redux와 react-redux 라이브러리를 설치합니다.

npm install redux react-redux

리덕스 스토어를 설정하고, 루트 리듀서를 생성한 후에는 Provider로 애플리케이션을 감싸줍니다.

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

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

2. 액션과 리듀서

리액트 네이티브에서의 액션과 리듀서는 기본적으로 리덕스에서 사용하는 것과 동일합니다. 액션은 type과 추가적인 payload를 가진 객체입니다.

리듀서는 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수로, 애플리케이션의 전반적인 상태를 관리합니다.

3. 컴포넌트에서 상태 사용하기

connect 함수를 사용하여 컴포넌트와 리덕스 스토어를 연결합니다. 이를 통해 컴포넌트에서 리덕스 스토어의 상태와 액션을 손쉽게 사용할 수 있습니다.

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ myState, myAction }) => {
  // myState와 myAction을 사용하여 UI 업데이트
};

const mapStateToProps = state => ({
  myState: state.myState,
});

const mapDispatchToProps = dispatch => ({
  myAction: () => dispatch({ type: 'MY_ACTION' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

리액트 네이티브에서의 리덕스 상태 중앙 저장소를 설정하는 방법에 대해 간단히 살펴보았습니다. 리덕스를 사용하여 리액트 네이티브 애플리케이션의 상태를 효율적으로 관리할 수 있으며, 이를 통해 애플리케이션의 복잡성을 줄일 수 있습니다.

1. 리덕스 설정

2. 액션과 리듀서

3. 컴포넌트에서 상태 사용하기

참고 자료