Capstone#6. 프로젝트에 Redux Toolkit 도입해 상태 관리 하기

 

 

안녕하세요~~!!
오늘 벌써 저의 캡스톤을 소개하는 6째 시간이네요 크크크
오늘은 어떤 글을 남길까~~ 하다가
우선우선 아무래도 상태관리만큼 또 중요한게 없잖아요~?
 

React Native에서의 '상태'란 두가지로 구분이 되는데,

 

로컬 상태와 글로벌 상태

 

 

 

[왼쪽 트리 그림]

- useState 등의 로컬 상태관리 : 후크는 로컬 구성 요소 상태에 사용해요.

상태를 특정 구성 요소에 로컬로 유지하고 해당 구성 요소가 자체 상태를 제어할 수 있도록 합니다.

이 상태는 명시적으로 props로 전달하거나 전역 상태 관리 형식을 사용하지 않는 한 

구성 요소 간 공유되지 않습니다!!

 

[오른쪽 트리 그림]

- Redux store의 전역 상태 관리 : Redux 스토어는 연결된 앱의 모든 구성 요소에서 액세스 할 수 있는 전역 앱 상태를 보유합니다. Redux 스토어는 앱의 상태 관리를 중앙집중화하도록 설계 되었어요.

 

 

그림으로 보면 한 눈에 이해할 수 있겠죠??

 

 

---

 

 

해당 글에서는 전역 상태 관리 방법인 Redux에 대해 소개해 드릴거예요!

로컬 상태 관리에 대한 글은

 

https://dlawlgus40.tistory.com/116

[RN] 프로젝트를 진행하며 겪은 Props Drilling 문제, 그리고 Redux 분석

 

좀 옛~날에 쓴 글이지만 이 글에서 정리를 했어요.

처음 react 를 접할 때 썻던 글이라 좀 조잡하지만... 저때는 나름 열심히 정리했답니다...ㅎㅎ

 

아무튼 !!

저의 프로젝트에선 Redux를 좀 더 쉽게 사용할 수 있는

Redux toolkit을 사용하였어요.

상태관리가 뭐랄까.. 프론트엔드의 꽃?? 같은 느낌이예요
되게 되게 핵심 같은..
 
 이번 글에서는 제 프로젝트에 Redux ToolKit를 어떻게 사용하였는지에 대해

설명해드릴게요~~💝💝

 

 

---

 

 

 

구조는 다음과 같이 구성하였어요.

 

도입하는 순서를 차근차근 알려드릴게요

 

1. Redux 툴킷 설치

 

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

설치 먼저 해줘요!!

 

2. Redux store 설정 (configureStore)

 

첫 번째 단계에서는 Redux store를 생성하는 것입니다.

Redux Toolkit의 configureStore를 사용하여 이를 수행하게 되는데

이 store 의 역할은 쉽게 말해 어플의 상태를 보관하는 역할을 해요!

 

Redux에는 store가 하나만 있기 때문에 상태는 앱 전체에서 일관된 형태를 뗘요!

 

그래서 configureStore도 한번만 정의되겠죠?

 

이런 특징을 갖고 

store의 주요 역할을 요약하자면,

 

- 단일 정보 소스 : 스토어는 앱 전체 상태를 보유한다.

- 중앙 집중식 상태 관리

 

export default configureStore({
  reducer: {
    user: userSlice,
    navigationSource: navigationSourceSlice,
  },
});

 

 

3. Redux 슬라이스 생성

 

 

createSlice 를 사용하여 슬라이스를 만들어줘요!

 

슬라이스는 상태의 일부를 정의하고 이를 수정하기 위한 리듀서 및 작업을 제공합니다.

 

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

const initialState = {
  name: '',
  email: '',
};

const userSlice = createSlice({
  name: 'user',  // The slice name used in the store
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.name = action.payload.name;
      state.email = action.payload.email;
    },
  },
});

export const { setUser } = userSlice.actions;
export default userSlice.reducer;

 

createSlice는 자동으로 액션과 리듀서를 생성해요.

 

initialState는 변수명 그대로 초기 상태를 정의하는 변수입니다.

 

리듀서는 상태를 수정하는 함수, 액션은 상태 변경을 트리거 하기 위해 전달합니다.

 

여기에 자신이 필요로 하는 상태들의 초기 값과 변경 리듀서들을 정의해주어요!

 

4. Provider 로 앱 래핑하기

 

 

import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { store } from './store';  // Import the store you just createdimport AppStackNavigation from './navigation/AppStackNavigation';  // Your navigation setup

export default function App() {
  return (
    <Provider store={store}>  {/* Wrap the entire app with Provider */}
      <NavigationContainer>
        <AppStackNavigation />
      </NavigationContainer>
    </Provider>
  );
}

 

 

이제 Provider 구성요소에 애플리케이션을 래핑해줘야해요.

 

전체 앱에서 Redux store를 사용하기 위해서 필수로 해주어야 하는 작업이예요.

 

5. Redux 상태 업데이트 하기

 

위에서 처럼 스토어를 연결되면 컴포넌트, 화면간의 상태 전달이 가능해져요!

 

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setUser } from './slices/userSlice';

const UserProfile = () => {
  const user = useSelector((state) => state.user);  // Get user data from Redux store
  const dispatch = useDispatch();  // Get dispatch function

  const updateUser = () => {
    dispatch(setUser({ name: 'John Doe', email: 'john.doe@example.com' }));
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <button onClick={updateUser}>Update User</button>
    </div>
  );
};

export default UserProfile;

 

 

- useSelect 는 redux 저장소의 상태에 액세스 하기 위해 Redux에서 제공하는 후크예요.

위의 코드처럼 state.user을 가져오면 'user'라는 이름을 가진 slice의 전체 상태를 가져온다는 것입니다.

 

- useDispatch 는 작업을 전달하기 위해 redux에서 제공하는 후크예요.

dispatch(setUser ~~) 이런식으로 setUser에 name이랑 email 를 업데이트 하겠단 것입니다.

 

 

 

이렇게 하면 나의 프로젝트에서 Redux toolkit 을 사용해서 상태관리 하기 성공 ⭐⭐👍👍