software

React Redux와 React Native Elements 소개

발행: (2025년 11월 30일 오후 12:57 GMT+9)
6 min read
원문: Dev.to

소개

React Native 애플리케이션을 개발할 때, 다음과 같은 요구가 자주 발생합니다:

  • 많은 컴포넌트에서 사용되는 전역 데이터를 관리한다.
  • 깔끔하고 일관된 UI를 빠르게 만든다.

이를 위해 자주 사용되는 두 라이브러리는 React Redux와 React Native Elements입니다. 이 자료에서는 두 라이브러리의 기본 개념과 구현 예제를 다룹니다.

React Redux

React Redux는 React 및 React Native 애플리케이션에서 전역 state를 관리하기 위한 라이브러리입니다. Redux는 많은 컴포넌트가 필요로 하는 데이터를 연속적인 props 전달 없이도 관리할 수 있게 도와줍니다.

Redux에서 가장 중요한 개념

  • Store – 애플리케이션 전체의 전역 state를 저장하는 장소. 애플리케이션에는 하나의 메인 스토어만 존재합니다.

  • Action – Redux에 어떤 변경을 수행하고 싶은지 알려주는 JavaScript 객체. Action은 type 속성을 가지며 payload를 가질 수 있습니다.

    { "type": "ADD_ITEM", "payload": "Apel" }

  • Reducer – Action에 따라 state가 어떻게 변할지를 정의하는 함수. Reducer는 순수 함수여야 합니다.

    function cartReducer(state = [], action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload];
    default:
      return state;
  }
}

  • dispatch – Action을 스토어에 보내는 함수.

    dispatch({ type: "ADD_ITEM", payload: "Apel" });

  • useSelector – 스토어에서 데이터를 읽어오는 Hook.

    const items = useSelector(state => state.cart);

Redux는 많은 컴포넌트를 가지고 전체 애플리케이션에서 데이터 일관성이 필요한 경우에 매우 유용합니다.

React Native Elements

React Native Elements는 React Native용으로 다양한 즉시 사용 가능한 UI 컴포넌트를 제공하는 라이브러리입니다.

주요 장점

  • Button, Card, Input, Icon, Header, Avatar, ListItem 등 많은 컴포넌트를 사용할 수 있다.
  • 모든 컴포넌트에 기본 스타일이 적용되어 있어 별도 스타일링 없이도 일관되고 전문적인 화면을 만들 수 있다.
  • 기본 스타일이 있더라도 각 컴포넌트는 props, style, theme을 통해 자유롭게 커스터마이징할 수 있다.

간단한 예시

import { Button } from "@rneui/themed";

React Native Elements는 개발 시간을 절약하고, 많은 수작업 스타일링 없이도 현대적인 UI를 구현할 수 있게 해줍니다.

React Native에서 React Redux 통합

설치

npm install @reduxjs/toolkit react-redux

코드 구조가 더 간단해지는 Redux Toolkit 사용을 권장합니다.

Store 만들기 (예: redux/store.js)

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

export const store = configureStore({
  reducer: {
    cart: cartReducer
  }
});

App.js에 Provider 추가

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

export default function App() {
  return (
    <Provider store={store}>
      {/* Komponen aplikasi lainnya */}
    </Provider>
  );
}

Provider는 애플리케이션의 모든 컴포넌트가 Redux state에 접근할 수 있도록 보장합니다.

State 가져오기

import { useSelector } from "react-redux";

const items = useSelector((state) => state.cart.items);

State 변경

import { useDispatch } from "react-redux";
import { addItem } from "../redux/cartSlice";

const dispatch = useDispatch();
dispatch(addItem("Jeruk"));

이와 같이 통합하면 React Redux가 전역 state를 보다 안정적이고 관리하기 쉽게 만들어 줍니다.

애플리케이션에서 React Native Elements 사용 예시

설치

npm install @rneui/themed @rneui/base

ProductCard.jsx

import { Card, Button, Text } from "@rneui/themed";

export default function ProductCard({ nama, harga }) {
  return (
    <Card>
      <Card.Title>{nama}</Card.Title>
      <Text>Harga: Rp {harga.toLocaleString()}</Text>
      <Button title="Beli" />
    </Card>
  );
}

Home.jsx

import { View } from "react-native";
import ProductCard from "./ProductCard";

export default function Home() {
  return (
    <View>
      <ProductCard nama="Produk A" harga={15000} />
      <ProductCard nama="Produk B" harga={25000} />
    </View>
  );
}

React Native Elements를 사용하면 스타일 코드를 거의 작성하지 않아도 화면이 깔끔하게 정돈됩니다.

결론

React Native 개발에서는 전역 state를 관리하고 일관된 UI를 구축하는 방법을 이해하는 것이 매우 중요합니다. React Redux는 복잡한 state 문제를 해결해 주고, React Native Elements는 UI 구축 속도를 크게 높여 줍니다. 두 기술을 모두 숙달하면 학생들은 보다 안정적이고 구조화된, 그리고 전문적인 외관을 갖춘 애플리케이션을 만들 수 있습니다.

Back to Blog

관련 글

더 보기 »