Redux (6) Today I am Redux Toolkit redux-toolkit (RTK) - redux 개발팀에서 2020년에 release한 라이브러리이고, 비동기통신에 필요한 thunk 미들웨어를 내장하고 있다. - redux 작업을 단순화하고, 실수를 방지하며 redux앱을 만들기 쉽게 해줌 - immer library를 내장 - redux devtools extension을 기본으로 제공 주요 기능 - configureStore - createAction - createReducer - createSlice - createAsyncThunk configureStore - cerateStore 함수를 wrapping 한 함수로 configureStore를 제공한다. - 기존에 reducer 함수를 합치는 과정을 진행하고, redux-thunk 및 re.. [Redux 강의노트] Redux Middleware | redux-saga redux-thunk - 함수를 dispatch해주는 미들웨어 redux-saga - 액션을 모니터링하고 있다가 특정액션이 발생하면 특정작업을 하는 방식 - 자바스크립트의 Generator 문법에 기반한 미들웨어 thunk와의 차이점 1. 비동기 작업 진행시 기존 요청을 취소할 수 있다. 2. 특정 액션이 발생할 때 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드를 실행할 수 있다. 3. 웹소켓을 사용하는 경우 Channel이라는 기능을 사용하여 더 효율적인 코드를 관리 할 수 있다. 4. 비동기 작업 실패시 재시도 하는 기능을 구현할 수 있다. Generator 문법 - 함수의 흐름을 특정구간에 멈춰놓았다가 다시 실행 할 수 있다. - 결과값을 여러번 내보낼 수 있다. function* gene.. [Redux 강의노트] Redux Middleware | logger, thunk 리덕스 미들웨어 액션이 디스패치될때 미들웨어에서 액션의 조건에 따라 무시처리 될 수 있다. - 주로 비동기 작업을 처리 할 때 사용된다. (API요청) **배울 내용 정리** - 리덕스 미들웨어 직접 만들기 - redux-logger 사용하기 : 액션, 상태를 출력해주는 라이브러리 사용해보기 - redux-thunk 사용하기 : 비동기 작업 처리 - redux-saga 사용하기 : 비동기 작업 처리 📌 리덕스 미들웨어 직접 만들기 1. 리덕스 프로젝트 생성하기 2. 리덕스 미들웨어 직접 만들기 리덕스 미들웨어는 하나의 함수이다. function middleware(store){ return function (next){ return function (action){ //하고 싶은 작업.. } } } - .. [Redux강의노트] Redux Redux - react에서 가장 사용률이 높은 상태 관리 라이브러리이다. context API+useReducer 사용과 Redux의 차이점 1. Redux에는 미들웨어라는 개념이 있다. 미들웨어를 사용하면 비동기 작업을 더욱 체계적으로 관리 가능하다. 2. 리덕스 사용하면 유용한 함수와 hook 을 사용할 수 있다. (connect, useSelector, useDispatch, useStore) 3. 기본적인 최적화가 이미되어있다. 4. 하나의 커다란 상태 5. DevTools 6. 이미 사용중인 프로젝트가 많다 언제 써야할까? 프로젝트 규모가 큰경우 - Y : Redux / N : Context API 비동기 작업을 자주 하는 겨우 - Y : Redux / N : Context API 리덕스가 편.. React → Redux | Redux 101 (2/2) Redux | NomardCoder * React Redux (0. Setup) - redux는 vanillaJS part에서 이미 설치했음 (package확인) - react-redux, react-router-dom 설치하기 (npm istall react-redux react-router-dom) 1. react, router 로 todo 만들기 App.js에 router로 Home, Detaile 페이지 생성 Router import React from "react"; import { HashRouter as Router, Route } from "react-router-dom"; import Home from "../routes/Home"; import Detail from "../routes/.. VanillaJS → Redux | Redux 101 (1/2) Redux | NomardCoder - 기본적으로 javascript application들의 state를 관리하는 방법 - react와 redux는 별개임 (vue, angular, js 등 원하는 곳에서 다 사용가능) **수업진행방식** 1) redux와 vanilla javascript 2) redux와react (react-redux) 1. redux없이 vanillaJS + ) vanillaJS를 redux로 바꾸기 2. redux없이 react +) react를 redux로 바꾸기 (react-redux) - redux가 왜 만들어졌고, 왜 redux를 사용해야하는지 - application을 어떻게 향상시키는지 - redux가 필요한 이유를 알기위해, redux없이 application을 실.. 이전 1 다음
