React

Redux

Redux란 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다.

useState vs Redux

useState는 컴포넌트 단위로 상태를 관리하지만, Redux는 전역으로 데이터 상태를 관리한다. 데이터의 값들이 변경되었을 때 그 값들을 사용하는 모든 컴포넌트들에개 변경된 값을 전달해주고 그 값들을 다시 화면에 보여준다.

Redux Toolkit

Redux Toolkit("RTK")은 Redux 로직을 작성하기 위해 공식적으로 추천하는 방법이다. @reduxjs/toolkit 패키지는 코어 redux 패키지를 포함하며, Redux 앱을 만드는 데 필수적인 API 메서드와 공통 의존성을 포함한다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 애플리케이션을 더 쉽게 작성할 수 있도록 지원한다.

Redux 설치

$ npm install react-redux 
$ npm install @reduxjs/toolkit //Redux Toolkit 설치
$ npm install --save redux-logger

Redux 사용

1. src directory안에 redux directory 생성
2. redux directory 안에 코드 작성

Redux Architecture

예를 들어, view: 사람, store:가방, state:노트라고 가정해보자
사람은 가방에 담긴 물건을 언제든지 꺼내서 사용할 수 있다. view는 store에 담긴 state를 언제든지 꺼내서 사용할 수 있게 해주는 것이다. 노트에 글을 적거나 지우고 싶은데, 이를 dispatch라고 한다. dispatch는 state를 업데이트하거나 특정 action을 취하기 위한 것이다. 특정 action을 취하는 노트를 덮어 가방에 다시 집어넣는 것을 Reducer라고 한다. dispatch를 하면 값을 store에 있는 노트 state에 저장해 준다.

다시 정리하면,
1. store에서 값을 불러오고, view에 값을 뿌려줌.
2. view에서 특정 action을 취하기 위해 dispatch를 함
3. dispatch를 하면 reducer가 동작
4. reducer를 통해 store의 값을 업데이트 해주며, view에 다시 값을 뿌려줌.

example

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
  	<App />
  </Provider>
);

App.js

import AuthRedux from "./authRedux";

function App() {
  return (
    <>
      <AuthRedux />
    </>
  );
}

export default App;

authRedux.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { login, logout } from "./redux/authSlice";

export default function AuthRedux() {
  const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(login());
  };
  const handleLogout = () => {
    dispatch(logout());
  };

  return (
    <div>
      <h1>Login App</h1>
      {isLoggedIn ? (
        <div>
          <p>로그인 상태입니다.</p>
          <button onClick={handleLogout}>로그아웃</button>
        </div>
      ) : (
        <div>
          <p>로그인되지 않았습니다.</p>
          <button onClick={handleLogin}>로그인</button>
        </div>
      )}
    </div>
  );
}

authSlice.js

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

const initialState = {
  isLoggedIn: false,
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state) => {
      console.log(state);
      console.log(state.isLoggedIn);
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.isLoggedIn = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

store.js

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

import authReducer from "./authSlice";

import logger from "redux-logger";

const store = configureStore({
  reducer: {
    auth: authReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});
export default store;

참고문서,
https://ko.redux.js.org/
https://webaura.tistory.com/entry/ReactJS-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Redux-%EC%84%A4%EC%B9%98%EC%99%80-%EC%A0%81%EC%9A%A9%EB%B2%95

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.