# react redux
[Redux] Redux-persist를 활용하여 로그인, 로그아웃 구현
로그인, 로그아웃을 구현하는 중 로그인 시에는 access token을 redux store에 저장하여 전역상태로 관리하고 로그아웃 시에는 저장되어있는 access token을 null로 변경하기 위한 작업이 필요했다. refresh token은 http only 옵
Thunk
미들웨어란?소프트웨어에서 어떤 작업을 수행하기 전과 후에 발생하는 이벤트를 가로채는 소프트웨어 컴포넌트. 이를 통해 여러 가지 작업을 수행할 수 있음.리덕스 미들웨어 https://react.vlpt.us/redux-middleware/리덕스에서의 미들웨
Redux-toolkit
리덕스 툴킷이란? 설치기존 리덕스 코드와 비교일반 리덕스 - count툴킷큰 차이점은 Action Value와 Action Creator를 직접 생성해주지 않고 Action Value, Action Creator, Reducer가 하나로 합쳐짐.Slice 라는 툴킷
Action Creator
Action Creator란?액션 객체의 value를 변경할 일이 생긴다면? 프로젝트 규모가 커진다면 일일이 변경이 힘들어짐.Action Creator 만들기.액션 객체를 한 곳에서 관리할 수 있도록 “함수”와 액션 value를 상수로 만들어 줌.Action Creat
리덕스의 흐름
리덕스의 주요 개념 store : 스토어는 애플리케이션의 전체 상태를 관리하는 단 하나의 객체임. 변경할 없으며 getState() 메서드를 통해 액세스할 수 있음. state를 변경하려면 스토어에 액션을 디스패치를 통해 보내야 함.action : 액션은 state
modules
modules 폴더에 counter.js 생성initialState === 초기 상태값.useState 사용 시 괄호 안 초기 값을 지정해주 던 것과 같음. 위 state에서 만든 초기 값은 객체이고 그 안에 number라는 변수에 초기값 0 을 할당해준 것. 초기값은
리덕스란?
리덕스란? 리덕스가 필요한 이유 Local state컴포넌트에서 useState를 이용해서 생성한 state.Global state
Redux Toolkit
서론 이 전에 작성 된 글을 이어서 이번엔 Redux Toolkit을 사용하여 코드를 다듬어보려고 합니다. 먼저 RTK라고도 불리는 Redux Toolkit에 대해 간략하게 알아보고 바로 코드를 수정해보겠습니다! > 이 글은 노마드코더의 Redux 강의로 학습하고
Redux를 사용해보자
이 전 글에서 Redux에 대해 전반적으로 알아보았으니 이번 글에서는 한 번 직접 코드를 작성해보면서 알아보겠습니다.이 글의 코드는 노마드코더의 Redux 강의를 보고 학습하며 정리하였습니다.React환경에서 ToDo 기능을 만들면서 리덕스를 어떤식으로 활용할 수 있는
Redux - 상태 관리 라이브러리
이전 회사에서 상태 관리 라이브러리로Recoil을 사용했었습니다. 깊게 사용하기보단 주로 전역 변수의 상태 관리를 위해 사용하였었는데 그 때 Redux가 아닌 Recoil을 사용했던 이유는 좀 더 사용방법이 간단하고, 단기간에 학습하여 적용하기가 쉽다는 점 때문이었죠.
03-17 코딩일기
ㅡ^ 까지가 단계별로 나누어 본 redux 사용법계속하여 redux 미들웨어 사용법도 올려보도록 하겠다.공부는 미리 하고 복습하고 .. 까먹지말자 ㅠㅠ 🌩️
bindActionCreators 보다는 useDispatch를 사용하자
bindActionCreators 보다는 useDispatch를 사용하자
2023-02-21(Redux-toolkit 사용이유, 모듈페이지의 나만의 해석)
✅✅리덕스 툴킷 사용 이유와 모듈페이지의 전부 @reduxjs/toolkit에서 createAsyncThunk와 createSlice를 가져와 axios를 사용하여 사용자 정의 API 파일에서 가져온다"createAsyncThunk"는 비동기 thunk 액션 생성자를
2023-02-22(Todolist만들면서 오류,순서)
✅ 일단 리덕스 툴킷으로 청크를 이용할 때 순서를 먼저 파악하는 게 중요하다.해당페이지에서 input의 인자를 받아 diapatch의 인자로 액션 객체가 되어 dispatch를 보내준다.dispatch로 보낸 payload가 reducer모듈의 미들웨어의 payload
2023-02-21(thunk)
비동기 부분을 다룰 때 axios패키지가 등장한다.==Axios통신을 통해서 DB에 CRUD를 한다==개념 : promise를 기초로 해서 http통신을 할 수 있는 라이브러리(패키지)패키지 설치 : yarn add axios1\. axios패키지를 설치하고 , y
[Redux] Redux - React Redux - Ducks Pattern
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너상태의 변화를 특정 함수(Dispatch)에 의해서만 변할 수 있게 통제해 상태변화를 예측 할 수 있게 만듬데이터가 단방향으로 흐르도록 설계한 Flux 디자인 패턴에서 영감을 받아 자바스크립트로 구현한 구현체어플리케이션(