[react] 리액트 네이티브에서의 상태 관리 방법

22 Dec 2023

react

리액트 네이티브 애플리케이션을 개발하면서 상태 관리는 매우 중요합니다. 상태 관리 방법에는 여러 가지가 있지만, 가장 널리 사용되는 방법은 내장 상태 관리 기능 및 외부 상태 관리 라이브러리를 이용하는 것입니다. 아래에서는 리액트 네이티브에서의 상태 관리 방법에 대해 알아봅니다.

내장 상태 관리

리액트 네이티브 애플리케이션에서 내장된 상태 관리 기능으로는 useState 훅을 사용하는 것이 주요한 방법입니다. useState를 사용하면 컴포넌트 내에서 간단하게 상태를 관리할 수 있습니다.

예를 들어, 아래와 같이 상태 값을 선언하고 업데이트할 수 있습니다.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

외부 상태 관리 라이브러리

더 복잡한 상태 관리를 위해서는 외부 상태 관리 라이브러리를 사용하는 것이 유용합니다. 리액트 네이티브에서는 Redux, MobX, Recoil 등의 라이브러리를 사용하여 상태를 효과적으로 관리할 수 있습니다. 이러한 라이브러리를 사용하면 상태를 전역적으로 관리하고, 복잡한 로직을 다룰 때 유용합니다.

예를 들어, Redux를 사용하여 상태를 관리하는 방법은 아래와 같습니다.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStore } from 'redux';

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

// Store
const store = createStore(reducer);

const MyComponent = () => {
  const { count } = store.getState();

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

결론

리액트 네이티브 애플리케이션에서는 내장 상태 관리 기능과 외부 상태 관리 라이브러리를 통해 상태를 효과적으로 관리할 수 있습니다. 간단한 상태 관리에는 내장 기능을 사용하고, 복잡한 상태 관리에는 외부 라이브러리를 도입함으로써 애플리케이션의 유지보수성을 향상시킬 수 있습니다.

참고 문헌: