[Redux Toolkit] Redux Toolkit이란 무엇일까 (+ React에서 사용하는 방법)

Redux Toolkit이란 무엇일까

(+ React에서 사용하는 방법)

 

---

 

Redux Toolkit 사용법이 궁금하신 분들은 아래의 ✅ 직접 해보기 (with React) 부분부터 읽으시면 됩니다😀

 

 

# Redux에 관심을 가진 계기

 

 처음 React 프로젝트를 만들기 시작했을 때는 상태 관리의 필요성을 못 느꼈다. 어차피 작은 개인 프로젝트인데 뭐 그렇게까지 할 필요 있을까...? 라고 생각했기 때문. 그러나...

 

 프로젝트를 진행하다 보니 갑자기 욕심이 생겨서 로그인 기능을 만들기로 했다. firebase에서 로그인 정보를 받고~ 로그인 여부를 확인 후 사용자의 마이페이지 화면도 보여주고~ 를 하려고 하니... props를 전달해주어야 하는데... 어.... 한순간에 복잡해졌다. 로그인 페이지에서 로그인을 하고 메인 페이지에서 로그인 여부를 확인하고 또 다른 페이지에서 로그인 정보를 끌고 와서 보여줘야 하고... 이제는 더 이상 단순히 컴포넌트들 간에 props를 전달해주는 방법으로는 프로젝트를 만들 수 없겠구나, 싶었다.

 

 그래서 Redux를 공부하기로 했다. 사실 원래도 언젠가는 배워야지~ 하고 있었지만, 원래 뭔가를 배우려는 마음은 그게 가장 필요할 때 생기는 거라고🥴 정말로 Redux가 필요해지니 바로 실행에 옮겨 배우게 되었다.

 

 

# 왜 Redux Toolkit을 선택했는지?

 

 Redux의 종류에 대해 먼저 생각해보자. Redux는 자바스크립트에 사용할 수 있는 라이브러리이다. 바닐라 자바스크립트에도 쓸 수 있고, 자바스크립트로 돌아가는 React에도 쓸 수 있고. 크게 종류를 나누자면 Redux, React-Redux, Redux Toolkit으로 나눌 수 있다. Redux는 자바스크립트로 동작하는 곳이라면 어디든 쓸 수 있는 상태관리자, React-Redux는 React에 더 편하게 맞춰 쓸 수 있는 상태관리자, 그리고 Redux Toolkit은 기존 Redux의 복잡한 점을 개선한 버전의 Redux라 할 수 있다. 비유하자면, React에서는 Create-React-App 으로 쉽게 프로젝트를 시작할 수 있는 것처럼, Redux Toolkit을 사용하면 Redux로 쉽게 개발 환경을 구축할 수 있다. (생활코딩님의 설명을 인용했다👏👏)

 

 사실 개인적인 생각으로는, 그래도 원래 있던 Redux부터 먼저 배우고 Redux-toolkit을 배우는 게 더 좋지 않을까?! 라고 생각해서 Redux부터 배우려고 했다. 그러나...

 

 

 Redux의 주요 기능인 createStore을 import하니까 Redux가 그냥 toolkit 쓰는 게 어떻냐고 추천(?)을 해줘서, Redux가 아닌 Redux-toolkit을 공부하기로 했다.

 

 

# Redux, React-Redux 지식

 

 Redux를 배우지 않고 Redux-toolkit만 배운다고는 하지만, 그렇다고 해서 기존에 존재하던 Redux와 React-Redux의 지식은 몰라도 되는가? 그럴 리가. toolkit은 기존 Redux를 바탕으로 업데이트 된 버전이기에, 그리고 내가 쓰는 프로젝트는 React 기반이기에, 그 두 지식을 모르고서는 toolkit을 사용할 수 없다. 그래서 간단하게라도 기존의 내용들을 먼저 정리하고 toolkit을 내용을 정리하였다.

 

 

* 해당 글은 생활코딩님의 Redux, React-Redux, React-Toolkit 강의를 바탕으로 작성되었습니다.

Redux https://youtu.be/Jr9i3Lgb5Qc

React-Redux https://youtu.be/yjuwpf7VH74

Redux-Toolkit https://youtu.be/9wrHxqI6zuM 

 

 

✅ Redux, React-Redux 기본 내용

 

 # 어떻게 상태 변화를 알려주는 걸까

 

 Redux는 상태를 관리해주는 라이브러리이다. 이 말이 잘 안 와닿을 수 있으니 조금 더 풀어서 설명하자면, 내가 만약 A라는 페이지에서 로그인을 하고 난 뒤 그 로그인 정보를 B페이지와 C페이지로 보내주고 싶다. 그럼 어떻게 보내야 할까? 기존 React라면 props를 전달하고, 전달하고... 의 방식으로 로그인 정보를 줬을 것이다. 그러나, Redux는 store라는 중앙 저장소에서 받아올 수 있다. 쉽게 말하지면 기존 React로는 유선으로만 정보를 전달할 수 있었다면 Redux를 사용하면 무선으로 정보를 전달할 수 있다.

 

Redux가 없다면

 

Redux가 있다면

 

 A페이지에서 변수를 변경하면, A페이지가 store에게 변수가 이렇게 변경됐어~ 라고 알려준다. 그럼 store는 그걸 받고 B와 C에게 변수가 변경됐대~ 하고 알려주는 것이다. 누가 누구에게 뭐를 넘겨주고 할 것 없이, 변수가 바뀌면 바뀌었다고 다른 페이지에게 알림을 보낼 수 있고, 알림을 받을 수 있다. 중앙 센터 같은 게 생겼다고 보면 될 듯🧐

 

 

# 누가 상태 변화를 알려주는 걸까 (*React 기준)

 

 각 페이지들, 그러니까 React 속 각각의 js파일들은 store를 통해 변수 값들을 주고 받는다. A페이지가 store에게 연락한다. "지금 로그인 됐으니까 B페이지한테 로그인된 사용자 정보 좀 전달해줘" 그럼 store는 B페이지에게 연락해서 "로그인 됐대 정보 받아가" 라고 한다. 그럼 B페이지는 사용자의 로그인 정보를 받을 수 있는 것이다. 이렇게 변수 값이 하나하나 모여 저장되기에 저장소, 즉 store라고 불리는 것이다. 그렇다면 A페이지는 store에게 어떻게 변수 값을 줄까? B페이지는 store에게 어떻게 변수 값을 받아올까? React-Redux에서 제공하는 함수를 쓰면 된다.

 

  그게 바로 useDispatch와 useSelector 이다.

 

 useDispatch를 사용하면 값을 변경할 수 있다. useDispatch()라고 적어주면 변수 값을 바꿀 수 있고, 그 정보가 store에 전달된다. useSelector를 사용하면 값을 가져올 수 있다. useSelector로 store의 특정 값을 불러와서 사용할 수 있는 것이다.

 

 다시 로그인 하는 상황을 예로 들어보자. A페이지에서 로그인을 한 뒤, 사용자의 로그인 정보를 B페이지와 C페이지에서 쓰고 싶다면? A페이지에서 useDispatch를 쓰고 B페이지와 C페이지에서 useSelector를 쓰면 된다. 간단하다👏👏👏

 

그냥 함수를 적어주면 된다

 

 

✅  Redux-Toolkit 기본 내용

 

# store를 나누자

 

 Redux에서는 store에 값들을 저장하고, 업데이트하고, 전달한다. 그런데 store에 들어있는 값이 너무 많아지면...? 프로젝트에 있는 모-든 변수를 단 하나의 저장소에 넣으면...? 아 그건 좀 별론데😅 당연히 파일을 작게 나누고 싶을 것이다. 그래서 toolkit에서는 slice라는 것이 추가되었다. 어려운 건 아니고, 그냥 store를 작게 나눈 것이다.

 

기존 Redux의 store

 

Redux-Toolkit의 store

 

 store 폴더 안에 slice라는 하위 폴더가 생겼다고 생각하면 쉽다. slice 속에 변수가 저장되고 useDispatch와 useSeletor 또한 slice에 접근하는 함수인 것이다.

 

 함수를 적는 방법과 관련된 다른 개념들(reducer라든지)는 뒤에서 직접 실습해보며 알아보고, 기본 개념은 이만큼만 하고 넘어가면 될 것 같다.

 

 

✅  직접 해보기 (with React)

 

 개념 자체는 많지가 않았다. Redux의 개념은 그냥 '전역적으로 상태관리를 합니다~' 로 정리되니까. 이제 직접 어떻게 설치를 하고, 어떤 파일을 만들어야 하고, 어떻게 함수를 적어야 하는지를 알아보자.

 

* react-redux 8.0.5 버전, Redux-Toolkit 1.9.1 버전 기준으로 작성되었습니다.

 

 

1. React-Redux 설치

 

// npm 사용하는 경우
npm install react-redux

// yarn 사용하는 경우
yarn add react-redux

 

 

2. Redux-Toolkit 설치

 

// npm 사용하는 경우
npm install @reduxjs/toolkit

// yarn 사용하는 경우
yarn add @reduxjs/toolkit

 

 

3. slice.js 생성

 

// authSlice.js

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

const authSlice = createSlice({
  name: "auth",
  initialState: { logInState: false },
  reducers: {
    logIn: (state) => {
      state.logInState = true;
    },
    logOut: (state) => {
      state.logInState = false;
    },
  },
});

export default authSlice;
export const { logIn, logOut } = authSlice.actions;

 

 

4. store.js 생성

 

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

const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
});

export default store;

 

 

5. 원하는 파일로 가서 useDispatch로 값 업데이트 하기

 

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { logIn, logOut } from "./authSlice";

function App() {
  const dispatch = useDispatch();
  
  useEffect(() => {
  // 만약 user가 존재하면 logIn 상태 업데이트 하기
    if (user) {
      dispatch(logIn());
    else {
      dispatch(logOut());
    }
  }, []);
  
  // 생략
  
}

 

 

 

6. 원하는 파일로 가서 useSelector로 값 받아오기

 

import React from "react";
import { useDispatch } from "react-redux";
import { logIn, logOut } from "./authSlice";

function App() {
  const isLoggedIn = useSelector((state) => {
    return state.auth.logInState;
  });

  // 생략
  
}

 

---

 

참고 자료

 

https://youtu.be/Jr9i3Lgb5Qc

https://youtu.be/yjuwpf7VH74

https://youtu.be/9wrHxqI6zuM