Today I Learned (TIL)

Redux 초반 세팅, 로그인 별 페이지 설정 23.12.01

폼폼코 2023. 12. 1. 21:49
728x90
반응형

현재 reduxjs/toolkit 을 사용하기위해 리덕스를 설치하는중이다 문제는 리덕스도 잘못한다는점..!

그래도 어쩌겠는가 해야지..벌써 12월이다 남은 2023년도 불태워 봐야겠다

리덕스란,

우리가 위에서 말한 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 입니다. “중앙 state 관리소" 를 통해서 State를 관리한다는 아이디어는 굉장히 좋으나, 우리가 그것을 직접 구현하기는 아직 어려우니까요. 패키지(라이브러리)의 도움을 받아 그것을 구현해보고자 합니다.

프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현합니다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문입니다.

 

리덕스는 전역상태 관리 라이브러리이다.

리덕스는 useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜준다.

리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다.

useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.

출처 입력

리액트 리덕스 설치 를 위한 명령어 yarn 패키지 매니저 기준이다

yarn add redux

yarn add react-redux
 

그리고 리덕스를 좀더 잘 이용하기 위해 리덕스 툴킷 설치 

yarn add react-redux @reduxjs/toolkit
yarn add @reduxjs/toolkit
 

귀찮으면 한번에 이어서 설치할수도있다 

yarn add redux react-redux @reduxjs/toolkit
 

 devtools 소개

  • 리덕스를 사용하면, 리덕스 devtools를 사용할 수 있습니다.
  • 다른 패키지에서는 찾아볼 수 없는 굉장히 강력한 개발툴입니다. 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있습니다.
  • 이 devtools 때문에 리덕스를 사용한다고 말하는 것도 과언이 아닌데요. 우리도 한번 사용해보겠습니다. 구글 웹스토어에서 플러그인을 설치해야 합니다.
툴킷이 아닌 일반 리덕스에서 devtools를 사용하고자 한다면, 별도 설정이 필요합니다. 
툴킷은 devtools이 내장되어 있기 때문에 별도의 코드 설정 없이 바로 사용 가능합니다.

 

실제로 데브툴스 사용하는중 현재 작동하는 리액트 스테이트 가 어떻게 이어지는지도 쉽게볼수있다.

리액트 페이지 설정 : 로그인했을경우만 메인페이지 보여주기 or 로그인안하면 로그인창만

유즈 셀렉터 이용 state.auth.isLogin 가 true 이면 바로 홈페이지 표시

(로그인을 했으면 => 지금은 임시로 로그인상태)

false 일경우에는 바로 로그인 페이지 표시 (삼항 연산자 사용)

왼쪽은 false 오른 쪽은 true 라 바로 홈페이지로 연결해준다 

import { useSelector } from "react-redux";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

export default function Router() {
  const isLogin = useSelector((state) => state.auth.isLogin);
  return (
    <BrowserRouter>
      <Routes>
        {isLogin ? (
          <Route>
            <Route path="/" element={<Home />} />
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="*" element={<Navigate replace to="/" />} />
          </Route>
        ) : (
          <>
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<Navigate replace to="/login" />} />
          </>
        )}
 

is Login 은 어디서 온걸까 하는 찰나에 강의 다시보고 알아왔다

컨피그 스토어에 auth를 모듈폴더 에서 import해 rootReducer에 넣어둔후

(컨피스 스토어에 넣어두면 useSelector 를 이용해 언제든지 가져올수있다)

 

const initiaState = { isLogin: true };

const auth = (state = initiaState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};
export default auth;
 

리덕스 구조 찾아보다가 발견한 사이트 여기도 한번 정독해야할거같다

728x90
반응형
댓글수2