[react] 리액트 네이티브에서의 리덕스 설정

22 Dec 2023

react

리액트 네이티브 앱에서 상태 관리를 위해 리덕스를 사용하는 것은 일반적인 패턴입니다. 리액트 네이티브 앱에 리덕스를 설정하고 사용하는 방법을 알아보겠습니다.

리덕스 설치

먼저, 리덕스를 프로젝트에 설치해야 합니다. 아래 명령을 사용하여 redux와 react-redux 패키지를 설치합니다.

npm install redux react-redux

스토어 생성

다음으로, 리액트 네이티브 앱의 엔트리 파일에서 스토어를 생성해야 합니다. 아래는 간단한 스토어를 생성하는 예제입니다.

import { createStore } from 'redux';
import rootReducer from './reducers'; // 여기서 rootReducer는 여러 개의 리듀서를 합치는 역할을 합니다.

const store = createStore(rootReducer);

리덕스 프로바이더 설정

리액트 네이티브 앱의 최상위 컴포넌트에서 리덕스 스토어를 사용하려면 리덕스 프로바이더를 설정해야 합니다. 아래는 App.js 파일에서의 예제입니다.

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

import AppNavigator from './AppNavigator';

export default function App() {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}

컴포넌트에서 상태 및 액션 사용

이제 리액트 네이티브의 컴포넌트 내에서 상태 및 액션을 사용할 수 있습니다. react-redux 패키지의 connect 함수를 사용하여 컴포넌트를 스토어에 연결할 수 있습니다.

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

function CounterComponent(props) {
  return (
    <View>
      <Text>{props.counter}</Text>
      <Button onPress={props.incrementCounter} title="Increment" />
    </View>
  );
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCounter: () => dispatch({ type: 'INCREMENT' })
  };
}

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

이렇게 리액트 네이티브에서 리덕스를 설정하고 사용할 수 있습니다. 위의 절차를 따르면 리액트 네이티브 앱에서 상태 관리를 효율적으로 할 수 있습니다.

자세한 내용은 리덕스 공식 문서를 참고하시기 바랍니다.