Redux-toolkit으로 로그인 구현 (1) state 저장하기

나는 최근에 Next.js로 SSR 환경에서 토이 프로젝트를 개발하고 있다.

간단하게 생각하고 시작했던 프로젝트라, 상태를 다른 컴포넌트에서 쓰더라도 한 두 번 props drilling을 하고 말지라는 생각에 상태 관리 라이브러리를 도입할 생각을 하지 않았다.

하지만 프로젝트 계획을 점점 크게 키우면서 로그인/아웃 기능을 구현해야 하다보니, 전역에서 상태를 관리해야 할 필요성을 느끼게 되었다.그래서 Redux-toolkit으로 로그인 기능을 구현하기로 했다.

Redux를 선택한 이유

여러 상태 관리 라이브러리가 있지만 Redux를 선택한 이유는 사실 특별하진 않았다. 우선 한국어로 된 자료가 비교적 많아서, 개발 중 어려운 일이 생겨도 대응하기 수월할 것이라고 판단했다. 실제로 취업을 준비하면서 프론트엔드 개발자 채용공고를 보았을 때, Redux를 사용하는 회사가 가장 많다고 느꼈다. 채용에서 유리한 스택을 사용하는 것이 좋겠다는 실리적 판단도 깔렸다.

Redux 설치와 기본 세팅

yarn add @reduxjs/toolkit

라이브러리를 설치하고 나서, app/store.js라는 파일을 만들었다. 이 곳에서 Redux가 관리할 상태 전체를 볼 수 있다. 아래와 같이 코드를 작성해주면 된다. Redux에서 이렇게 쓰도록 정해둔 것이기 때문에, 복사해서 붙여넣기를 하면 된다.

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

import 상태파일명 from "상태파일경로";

const rootReducer = combineReducers({
  상태이름: 상태파일명,
});

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

export default store;

createSlice의 사용

이제 로그인 정보가 들어갈 자리를 만들어줘야 한다. 나는 store/LoggedState.js라는 파일을 만들어서, HTTP 통신으로 받아온 로그인/아웃 응답값을 state에 담기로 했다.

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

const initialState = {
  isLogged: false,
  user_name: null,
  user_id: null,
};

export const LoggedState = createSlice({
  name: "user",
  initialState,
  reducers: {
    loginAccount(state, action) {
      state.isLogged = true;
      state.user_name = action.payload.user_name;
      state.user_id = action.payload.user_id;
    },
    logoutAccount(state) {
      state.isLogged = false;
      state.user_name = null;
      state.user_id = null;
    },
  },
});

// Action creators are generated for each case reducer function
export const { loginAccount, logoutAccount } = LoggedState.actions;

export default LoggedState.reducer;

여기서부터는 개발하는 사람마다 다소 차이가 있을 수 있다. 내가 진행 중인 프로젝트에선 사용자의 이름과 아이디만 있으면 돼서, 그 두 개와 로그인 여부를 Boolean으로 담는 상태도 만들었다.

 

createSlice로 이 상태 묶음들의 name을 지정해주고 (크게 의미는 없다), 초기값인 initialState를 지정해준다. 초기값은 바깥에 따로 변수로 빼서 코드를 보기 편하게 했다. 그 아래 reducers가 핵심이다.

reducers 안에 object로 다시 묶어서 상태를 어떻게 변하게 해줄 지를 함수의 형태로 정해주면 된다. 이 함수 이름은 각 페이지의 컴포넌트에서 dispatch라는 hook 안에 쓰여지면서, 상태를 변경하도록 Redux에 전달해준다. 한편, reducers 함수들의 매개변수 중 state는 이 상태의 현재 상태 값을 의미하고, action은 실제 페이지 컴포넌트에서 전달해준 값을 의미한다. 위 코드로 예를 들자면, state.user_name = action.payload.user_name;은 현재 user_name을 컴포넌트에서 전달해준 새 값의 user_name으로 바꾸겠다는 말이다.