Colin's Blog
[react] 리액트 네이티브에서의 리덕스와 useReducer 사용하기

리액트 네이티브 앱을 개발할 때, 앱의 상태를 효과적으로 관리하는 것은 매우 중요합니다. 상태 관리를 위해 리액트 네이티브에서는 리덕스와 useReducer와 같은 도구를 사용할 수 있습니다.

리덕스란?

리덕스는 상태 관리를 위한 자바스크립트 라이브러리로, 앱 전역의 상태를 효과적으로 관리할 수 있도록 도와줍니다. 이벤트 처리, 비동기 작업 처리 및 상태 관리 등 다양한 기능을 제공합니다.

리덕스를 사용하면 중앙 상태 저장소(store)를 통해 상태 관리가 가능하며, 상태를 변경하기 위한 액션(action)과 액션에 대한 처리를 하는 리듀서(reducer)를 통해 상태를 업데이트할 수 있습니다.

// 예시: 리덕스 액션과 리듀서
const initialState = {
  count: 0
};

function 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;
  }
}

리액트 네이티브에서의 리덕스 사용하기

리액트 네이티브에서 리덕스를 사용하려면 react-redux 패키지를 설치하고 설정해주어야 합니다. 또한 redux 패키지도 함께 설치해야 합니다.

react-redux를 사용하여 컴포넌트와 리덕스를 연결하고, redux 패키지를 사용하여 중앙 상태 저장소를 생성하고 관리할 수 있습니다.

useReducer를 활용한 상태 관리

리액트 네이티브에서는 리덕스 이외에도 useReducer 훅을 사용하여 상태를 관리할 수 있습니다. useReducer는 리듀서 함수와 초기 상태를 전달받아 상태와 액션 디스패치 함수를 반환하며, 리덕스와 유사한 방식으로 상태를 업데이트할 수 있습니다.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

결론

리액트 네이티브 앱을 개발할 때, 효율적인 상태 관리를 위해 리덕스와 useReducer를 활용할 수 있습니다. 두 가지 방법을 통해 상태를 관리하고, 앱의 규모와 복잡성에 적합한 방법을 선택하여 상태를 효과적으로 관리할 수 있습니다.

상황에 맞게 적절한 상태 관리 방법을 선택하여 개발을 진행하면, 유지보수성이 높은 리액트 네이티브 앱을 개발할 수 있을 것입니다.

© 2018 Colin. All rights reserved.