[React] Redux를 이용한 사용자 정보 저장 및 유지하기

사용자 정보 유지

• 로그인한 사용자 정보를 Redux를 활용하여 저장하고, 이를 마이페이지에서 확인할 수 있도록 구현
• redux-persist를 이용해 새로고침 후에도 사용자 정보가 유지되도록 설정

Redux 상태 관리 설정

Redux Slice 생성

createSlice 사용하여 사용자 정보를 저장하는 userSlice 만들기

UserSlice.js

//userID, userName 관리하는 userSlice 
import { createSlice } from "@reduxjs/toolkit";
import { PURGE } from "redux-persist";

// 초기값 설정
const initialState = {
  userID: "",
  userName: "",
};

//slice 생성함수 
export const userSlice = createSlice({
  name: "user", // slice 이름
  initialState, // 초기값
  // reducer 객체
  reducers: {
    // aciton과 reducer 로직
    initUser: (state) => {
      state.userID = initialState.userID;
      state.userName = initialState.userName;
    },
    setUser: (state, action) => {
      state.userID = action.payload.userID;
      state.userName = action.payload.userName;
    },
  }, //PURGE 액션 발생 시, 초기 상태로 
  extraReducers: (builder) => {
    builder.addCase(PURGE, () => initialState);
  },
});

export const { initUser, setUser } = userSlice.actions;

export default userSlice.reducer;

Redux Store 설정

redux-persist로 상태를 로컬 저장소에 저장할 수 있도록

• combineReducers로 여러 개의 리듀서 통합
• persistReducer → userSlice를 영구 저장

store.js

만든 userSlice 추가하기

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";

import storage from "redux-persist/lib/storage";
import { persistReducer } from "redux-persist";
import { userSlice } from './userSlice';

const reducers = combineReducers({
  //여러개의 reducer를 combineReducer 사용하여 묶어서 관리 
  user:userSlice.reducer
});

//persistConfig를 사용해서 영구적으로 저장하는 reducer 생성
const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducers);

//configureStore로 store 선언
export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
});

Provider 설정

Provider를 통해 전역에 store를 제공
PersistGate 컴포넌트로 App을 감싸고, redux에서 관리하는 state를 영구 저장

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

import { store } from "./redux/store";
export let persistor = persistStore(store);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </PersistGate>
  </Provider>
);

LoginPage.js

사용자가 입력한 아이디와 닉네임을 Redux에 저장하고,
로그인 버튼을 클릭하면 마이페이지로 이동

• useDispatch로 Redux 상태 변경
• 입력받은 값을 setUser를 통해 Redux에 저장

import { useDispatch } from "react-redux";
//userSlice에서 만든 state를 변경하는 action import
import { setUser } from "../redux/userSlice";

const LoginPage = () => {
  // input 관리
  const [ID, setID] = useState();
  const [name, setName] = useState();

  const dispatch = useDispatch();
  // 정보 저장 함수 redux에서 state 변경 시 사용하는 함수 
  const submintAccounts = () => {
    dispatch(
      setUser({
        userID: ID,
        userName: name,
      })
    );
    navigate("/mypage");
  };

  return (
    <>
      <div>
        <h1>로그인</h1>
        <InputWrapper>
          <input
            placeHolder="아이디"
            onChange={(e) => setID(e.target.value)}
          ></input>
          <input
            placeHolder="닉네임"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button onClick={submintAccounts}>로그인</button>
        </InputWrapper>
      </div>
    </>
  );
};

export default LoginPage;

MyPage.js

LoginPage.js에서 redux에 저장한 유저 정보 가져오기

import React from "react";

import { useSelector } from "react-redux";

const MyPage = () => {
  const { userName, userID } = useSelector((state) => state.user);
  return (
    <>
      <div>
        <div>
          {userName}({userID})님 반갑습니다.
        </div>
      </div>
    </>
  );
};

export default MyPage;