[Redux] React - Redux로 front 내 상태관리

티스토리 뷰

Front End/REACT

[Redux] React - Redux로 front 내 상태관리

5_Clock 2023. 10. 20. 12:29

환경

OS: macOS
IDE: vs code
node: v20.6.0
library: redux-toolkit

Redux는 자바 스크립트 앱 내에서 상태관리를 해주는 라이브러리이다.

React에서는 상태관리를 부모에서 자식으로 내려주는 방식으로 사용하고 있다.

하지만 여기서의 문제점은 한 컴포넌트에 달려있는 자식이 너무 많아진다면, 상태 관리가 복잡해진다는 점에 있다.

따라서 이러한 코드의 복잡성을 해결하기 위해서 Redux를 사용할 수 있다.

우선 Redux는 상태를 저장하는 저장하는 Store와 그 저장소에 운반될 데이터인 Action,

마지막으로 Store에 Action을 전달할 Reducer 세 가지의 개념이 존재한다.

0. Installation

이 글에서는 redux-toolkit을 사용하도록 할 것이다.

$ npm install @reduxjs/toolkit react-redux

redux-toolkit을 사용하는 이유로는 아래 참조 사이트를 참고하면 좋을 것 같다.

https://ko.redux.js.org/redux-toolkit/overview/

Redux Toolkit: 개요 | Redux

Redux Toolkit은 Redux 로직 작성을 위해 권장하는 방법입니다

ko.redux.js.org

1. Reducer

가장 먼저 Redux의 상태관리에서 저장소에 데이터를 저장하는 역할인 Reducer를 만들어 볼 것이다.

const { createSlice } = require("@reduxjs/toolkit");

const initialState = {
    isLoggedIn: false,
    email: null,
    userName: null,
    userId: null,
}

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        SET_ACTIVE_USER: (state, action) => {
            const {email, username, userId} = action.payload;
            state.isLoggedIn = true;
            state.email = email;
            state.userName = username;
            state.userId = userId;
        },
        REMOVE_ACTIVE_USER: (state) => {
            state.isLoggedIn = false;
            state.email = null;
            state.userName = null;
            state.userId = null;
        }
    }
})

export const {SET_ACTIVE_USER, REMOVE_ACTIVE_USER} = authSlice.actions;

export const selectIsLoggedIn = (state) => state.auth.isLoggedIn;
export const selectEmail = (state) => state.auth.email;
export const selectUserName = (state) => state.auth.userName;
export const selectIsUserId = (state) => state.auth.userId;

export default authSlice.reducer;

createSlice()를 통해서 reducer를 생성할 수 있다.

name: 생성되는 reducer의 이름을 지정한다. 사용자가 임의로 고유한 이름을 지정해주면 된다.
initialState: reducer에 최초로 들어가는 값이다.(default의 개념)
reducer: 실제로 동작할 reducer들이 담기는 곳
- state: initailState에 reducer 동작 이후 담길 상태 객체
- action.payload: 넣어줄 데이터를 담아오는 객체

export를 통해서 reducer들과 각 변수들을 가져다 쓸수 있게 해주면 좀 더 편하게 사용이 가능하다.

2. Store

store에는 rootReducer를 두고, rootReducer에서 앞서 만들어준 reducer를 등록해서 사용이 가능하다.

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import authReducer from './slice/authSlice';

const rootReducer = combineReducers({
    auth: authReducer
});

const store = configureStore ({
    reducer: rootReducer
});

export default store;

3. Provider

provider를 통해서 redux에서 생성된 reducer들을 사용할 수 있게 만들어 준다.

우선 먼저 custom provider를 만들고 그것을 전체 layout에 감싸주는 형태로 만들 수 있다.

'use client'
import React from 'react'
import { Provider } from 'react-redux'
import store from './store';

const Providers = ({children}) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  )
}

export default Providers;

위 코드는 custom으로 생성한 Providers이고,

import ToastProvider from '@/components/toastProvider/ToastProvider'
import './globals.css'
import { Inter } from 'next/font/google'
import Footer from '@/layouts/footer/Footer'
import Header from '@/layouts/header/Header'
import Providers from '@/redux/provider'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <Header />
          <ToastProvider />  
          {children}
          <Footer />
        </Providers>
      </body>
    </html>
  )
}

다음처럼 layout(app)에 전체적으로 감싸줄 수 있다.

소스코드에서는 추가적으로 Header, ToastProvider, Footer등도 생성을 해 같이 넣어주었다.(생략가능)

4. Redux 사용

redux에서 상태를 가져와 쓰기 위해서는 dispatch를 사용하면 된다.

dispatch함수는 hooks를 통해서 호출 할 수 있다.

import { useDispatch } from 'react-redux';
import { REMOVE_ACTIVE_USER, SET_ACTIVE_USER } from '@/redux/slice/authSlice';

const dispatch = useDispatch();

...

dispatch(SET_ACTIVE_USER({
  email: user.email,
  userName: user.displayName ? user.displayName : displayName,
  userId: user.uid
}))

...

dispatch(REMOVE_ACTIVE_USER())

참고 사이트

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

소개 > 시작하기: Redux를 배우고 사용하기 위한 자료

ko.redux.js.org

https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/

상태 관리 도구(State Management Tools)의 필요성 - 하나몬

상태 관리 도구(State Management Tools) 개념 부터 그 필요성 및 인기 있는 상태 관리 라이브러리 소개까지 ⚡️ 상태 관리 도구(State Management Tools)란? ❗️상태 관리 도구가 왜 필요할까? 👉 먼저 상태

hanamon.kr

728x90

저작자표시 비영리 동일조건

'Front End > REACT' 카테고리의 다른 글

React, Next.js, Firebase를 사용한 Google 소셜 로그인(3) - 구글 (0)	2023.10.19
React, Next.js, Firebase를 사용한 Google 소셜 로그인(2) - 이메일/비밀번호 (1)	2023.10.19
React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅 (1)	2023.10.15
[SASS] classNames 사용하기 (0)	2023.10.15
[React / Next.js] 페이지 UI 생성하기 (0)	2023.10.03

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

250x250

티스토리 뷰