[react] 리액트 네이티브에서의 리덕스 상태 내보내기

22 Dec 2023

react

리액트 네이티브 앱에서 리덕스를 사용하면 앱의 상태를 중앙에서 관리하고 데이터를 쉽게 공유할 수 있습니다. 이 게시물에서는 리액트 네이티브 앱에서 리덕스 상태를 내보내는 방법에 대해 알아보겠습니다.

리덕스 상태 내보내기

리액트 네이티브 앱에서 리덕스 상태를 내보내기 위해 react-redux 라이브러리에서 connect 함수를 사용합니다.

import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  // 여기에 상태를 내보내는 로직 작성
});

export default connect(mapStateToProps)(YourComponent);

위의 코드에서 mapStateToProps 함수는 리덕스 상태를 컴포넌트의 props로 매핑하는 역할을 합니다.

예시

다음은 간단한 예시입니다.

import { connect } from 'react-redux';
import { increment, decrement } from './actions';

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

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

export default connect(mapStateToProps, { increment, decrement })(Counter);

위의 예시에서 mapStateToProps 함수는 state.count 값을 count prop으로 매핑하고, increment와 decrement 액션 생성자를 Counter 컴포넌트에 연결합니다.

리액트 네이티브 앱에서 리덕스 상태를 내보내는 방법에 대해 간단하게 살펴보았습니다. 이를 통해 앱의 상태를 효율적으로 관리하고 상태를 쉽게 공유할 수 있습니다.

더 많은 정보를 원하시면 react-redux 공식 문서 를 참고하시기 바랍니다.