[react] 리액트 네이티브에서의 리덕스와 useContext 사용하기

22 Dec 2023

react

리액트 네이티브 앱을 개발하다보면 상태 관리를 위해 리덕스나 useContext를 사용해야 하는 경우가 있습니다. 이번 포스트에서는 리액트 네이티브에서의 리덕스와 useContext를 사용하는 방법에 대해 알아보겠습니다.

1. 리액트 네이티브에서의 리덕스

리액트 네이티브 앱에서 리덕스를 사용하기 위해서는 아래와 같은 단계를 따릅니다.

1.1. 리덕스 라이브러리 설치

먼저, 리액트 네이티브 프로젝트에 리덕스 관련 라이브러리를 설치합니다.

npm install redux react-redux

1.2. 스토어 설정

다음으로, 리덕스 스토어를 설정합니다. redux의 createStore 함수를 사용하여 스토어를 생성합니다.

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

const store = createStore(rootReducer);

1.3. 컴포넌트에서 상태 관리

리덕스 스토어를 생성한 후, 리액트 네이티브 컴포넌트에서 react-redux의 connect 함수를 사용하여 스토어에 연결하고 상태를 관리할 수 있습니다.

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

const Counter = ({ count, increment, decrement }) => {
  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </View>
  );
};

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
};

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

2. useContext를 활용한 상태 관리

리액트 네이티브에서는 리덕스 대신 useContext 훅을 사용하여 상태를 전역으로 관리할 수 있습니다.

2.1. 컨텍스트 생성

먼저, 전역으로 상태를 관리하기 위한 컨텍스트를 생성합니다.

import React, { createContext, useContext, useReducer } from 'react';

const AppContext = createContext();

export const useAppContext = () => {
  return useContext(AppContext);
};

export const AppProvider = ({ children }) => {
  const initialState = { count: 0 };

  const reducer = (state, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return { count: state.count + 1 };
      case 'DECREMENT':
        return { count: state.count - 1 };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

2.2. 상태 관리 컴포넌트

상태 관리를 위한 컴포넌트에서 useAppContext를 사용하여 컨텍스트를 가져와 상태를 관리할 수 있습니다.

import React from 'react';
import { useAppContext } from './AppContext';

const Counter = () => {
  const { state, dispatch } = useAppContext();

  return (
    <View>
      <Text>{state.count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
      <Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} />
    </View>
  );
};

마무리

리액트 네이티브에서는 리덕스나 useContext를 사용하여 상태를 관리할 수 있습니다. 어떤 방법을 선택할지는 프로젝트의 규모나 팀의 선호도에 따라 달라질 수 있습니다. 각 방법의 장단점을 고려하여 적절히 활용하도록 합시다.

참고 자료