BLOG

Redux 상태 관리 라이브러리

저장된 데이터를 전역에서 관리

NPM 설치

npm i redux
npm i react-redux
npm i @reduxjs/toolkit

App.tsx

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

export default function App() {
  return (
    <Provider store={store}>
      <Main />
    </Provider>
  );
}

src/slices/counter.ts

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const countSlice = createSlice({
  name: "count",
  initialState,
  reducers: {
    plusCount(state) {
      state.count += 1
    },
    minusCount(state) {
      state.count = state.count - 1;
    },
    setCount(state, action) {
      state.count = action.payload.count;
    },
  },
});

export default countSlice;

src/store/reducer.ts

import { combineReducers } from "redux";
import countSlice from "../slices/counter";

const rootReducer = combineReducers({
    countReducer: countSlice.reducer
});

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

src/store/index.ts

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducer";
import { useDispatch } from "react-redux";

const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => {
        return getDefaultMiddleware();
    }
});

export default store;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

src/screens/Main.tsx

import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useSelector } from "react-redux";
import countSlice from "../slices/counter";
import { useAppDispatch } from "../store";
import { RootState } from "../store/reducer";

const Main = () => {
  const dispatch = useAppDispatch();
  const count = useSelector((state: RootState) => state.countReducer.count);

  const setCounter = (value: number) => {
    dispatch(
      countSlice.actions.setCount({
        count: value,
      })
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.view_container}>
        <Text>{count}</Text>
      </View>
      <View style={styles.button_container}>
        <TouchableOpacity
          style={StyleSheet.compose(styles.button, { backgroundColor: "blue" })}
          onPress={() => dispatch(countSlice.actions.plusCount())}
        >
          <Text style={styles.button_text}>+</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={StyleSheet.compose(styles.button, { backgroundColor: "red" })}
          onPress={() => {
            if (count > 0) {
              dispatch(countSlice.actions.minusCount());
            }
          }}
        >
          <Text style={styles.button_text}>-</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  view_container: {
    flex: 1,
    justifyContent: "center",
  },
  button_container: {
    flex: 1,
    flexDirection: "row",
  },
  button: {
    width: 100,
    height: 100,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 20,
    margin: 20,
  },
  button_text: {
    fontWeight: "bold",
    color: "#ffffff",
    fontSize: 30,
  },
});

export default Main;

리액트 네이티브 (React Native)는 페이스북에서 개발한 오픈 소스 프레임워크

JavaScript (+ TypeScript), React를 사용하여 안드로이드, iOS 앱을 개발할 수 있다

일반적으로 하나의 코드 작성을 통해 안드로이드, iOS 앱을 개발할 수 있지만, 각 플랫폼마다 지원하는 함수가 다른 경우가 있다

프로젝트 방식에는 React Native CLI 와 Expo 방식이 있다

Expo 방식은  안드로이드, IOS 에서 Expo Go 어플을 통해서 같이 네트워크 안에 있다면 QR 코드로 쉽게 스마트폰에서 실시간으로 확인하면서 쉽게 개발할 수 있고, Expo에서 제공하는 모듈들이 많기 때문에 편했다

그리고 확실히 개발 속도가 빠르다는 것을 느꼈다

React Native CLI 방식을 이용하면 안드로이드 스튜디오에서 제공하는 에뮬레이터와 XCode의 시뮬레이터를 통해 실시간으로 확인하면서 개발이 가능하고, 그렇지 않다면 스마트폰에 USB를 연결해서 확인도 가능하다. (Expo도 에뮬레이터, 시뮬레이터로 확인 가능)

처음 시작했을때 환경 설정하는 것도 어렵고, android, ios 폴더를 별도로 있어 파일의 양이 많다. 환경 구축이 되어 있지 않다면 초기에 어려운 과정으로 인해 개발 속도가 매우 느릴 수 있음

하지만 안드로이드, IOS의 네이티브 모듈을 건들기 위해서는 CLI 방식을 택해야 한다

외주 프로젝트를 시작할 때,  개발 속도가 빠르고 편한 Expo 방식을 사용했다

문제는 Expo에서 제공하는 무료 배포 방식을 사용했었는데, 저녁 시간 대 사용하면 1시간 넘게 기다리기도 했다

마냥 대기 시간을 기다려야 했기 때문에 빠르게 포기하고,  React Native CLI로 변경해서 개발했다

Expo에서 유료 플랜을 사용하면, 배포 속도가 빠르다고 하는데 가격이 비싼 것 같다

실제 서비스라면 React Native CLI로 개발하는 것이 좋을 것 같다

프로젝트 생성

# React Native CLI  *
npx react-native init [project name]
npx react-native init specificVerProject --version=0.69 # 특정 버전 설치

# expo 설치
npm install --global expo-cli

# expo project 생성
npx create-expo-app # javascript
npx create-expo-app --template # typescript

# bun
bunx create-expo-app # javascript

프로젝트 실행

npm run start
npm run android
npm run ios

• 안드로이드인 경우, 안드로이드 스튜디오와 에뮬레이터 (Emulator)를 설치
• iOS인 경우, Xcode와 시뮬레이터 (Simulator)를 설치