State Management 검색 결과

해당 글 13건

react-query를 이해하는 몇가지 지식과 질문들

전제 지식들 staleTime : 마운트 되어 있는 시점에서 데이터가 구식인지 판단함. cacheTime : 언마운트된 후 어느 시점까지 메모리에 데이터를 저장하여 캐싱할 것인지를 결정함. refetching의 조건 New instances of the query mount 작동 되는 경우 : query key에 react state를 주고, state가 바뀌면 다시 fetch The window is refocused 작동 되는 경우 : 유저가 다른 작업하다가 다시 typed에 돌아오면 다시 fetch The network is reconnected. 작동 되는 경우 : 네트워크가 끊겼다가 다시 연결되면 fetch됨 The query is optionally configured with a refetc..
State Management/react-query 2021. 10. 28. 23:07

[setting] default, QueryClient, Dev tools

react-query 문서에서는 자신들의 핵심적인 기능으로 queryClient, useQuery, useMutation을 소개하고 있다. (https://react-query.tanstack.com/quick-start) 일반적인 프로젝트에서는 이 세 기능을 주로 사용한다고하니 우선 이 세 기능을 익히고서 이후에 필요할 때 심화적인 학습을 하는 방식으로 진행해보자. Important Defaults (중요한 기본값들) Doc : https://react-query.tanstack.com/guides/important-defaults 기본적인 세 기능(queryClient, useQuery, useMutation)을 사용하기 위해서 알고 있어야 하는 기본적인 설정들이다. 문서에 따르면 합당한 수준에서의 ..
State Management/react-query 2021. 8. 9. 02:46

redux toolkit with typescript

회사에서 chrome extension 관련 개발을 하면서 redux를 redux toolkit으로 교체하고 typing까지 해주어야 할 일이 생겼다. 결론적으론 기존 redux보다 훨씬 코드량이 줄어서 만족중. 코드 전문을 보자면 다음과 같다. const initialState = {} const rootReducer = combineReducers({ firebase: firebaseReducer, firestore: firestoreReducer, dropdown: dropdownReducer, shortcutAction: shortcutActionReducer }) const store = configureStore({ reducer: rootReducer, middleware: getDefaul..
State Management/⚛ Redux 2021. 8. 7. 21:30

redux-toolkit (1) : redux와 RTK를 비교해보자

Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 회사에서 툴킷을 써서 부랴부랴 배워보기로 했다. 0. 설치 속이 다 시원하네 // immer, redux, redux-devtools-extension 자체 내장되어 있으므로 설치 ㄴㄴ yarn add @reduxjs/toolkit react-redux 1. createStore너무 길다 => configureStore로 간편하게 기존의 redux의 createStore를 대체합니다. https://redux-toolkit.js.org/api/configureSt..
State Management/⚛ Redux 2021. 6. 27. 23:05

immer로 redux state 불변성 유지하기

무지성스럽게 불변성 관리를 할 수 있다길래 배웠다. 솔직히 지금까지 한 프로젝트에서 immer라 필요한 정도로 depth가 깊게 들어간 객체를 불변성 유지할 일이 없어서 사용을 안해왔다. 그 정도로 복잡해지기 전에 어떻게든 객체를 쪼개놓아야 한다는 생각이었다. 그런데 아무래도 다음 프로젝트에서는 사용해야 할 것 같아서 찾아보기로. ㅎ 아래는 velopert가 reducer에 immer를 붙인 꼴이다. 아래와 같은 immer의 produce 함수를 활용하면 된다. produce(currentState, producer: (draftState) => void): nextState 일반 local state에 사용해도 되고, redux에서 사용해도 된다. local state에서 사용할 사람들은 아래 글을 읽..
State Management/⚛ Redux 2021. 5. 21. 16:36

redux-saga를 통한 redux 비동기 처리 (1) : redux-saga 설치 및 구성

redux-thunk와 함께 비동기 redux 처리 미들웨어의 양대산맥을 이루고 있습니다. redux-thunk가 제일 배우기 쉽다고 하고, saga는 어려운 대신 기능이 강력합니다. 일반 redux는 동기적인 동작만 가능합니다. 예를 들어 signUpAction 액션을 취한 후 10초 후에 signUpSuccess 액션을 하고 싶다면, Redux 단에서는 취해줄 수 있는 것이 없습니다. export const signUpSuccess = { type: SIGN_UP_SUCCESS, }; export const signUpAction = (data) => { return { type: SIGN_UP, data: data, }; }; 설치 npm i redux-saga redux-saga/effect 중에..
State Management/⚛ Redux 2020. 8. 14. 08:11

Redux 미들웨어, redux-thunk

redux-thunk, redux-promise에 대해서는 아래 게시판에서 간략하게 살펴본 적 있습니다. 여기서는 조금 더 자세하게 살펴봅시다. applyMiddleware, compose를 활용하여 enhancer 만들기 사용하기 커스텀 미들웨어 직접 미들웨어를 만들 수 있습니다. const loggerMiddleware = (store) => (next) => (action) => { console.log("middleware!!"); // next로 넘겨주지 않으면 리듀서로 액션을 진행하지 못합니다. next(action); }; export default loggerMiddleware; import loggerMiddleware from "./lib/loggerMiddleware"; const s..
State Management/⚛ Redux 2020. 7. 18. 23:42

redux-action으로 액션, 리듀서를 간략히 작성하기

redux-actions.js.org/ Read Me redux-actions.js.org 설치 npm i redux-actions 액션 생성 함수 => createAction 리듀서 => handleActions handleActions을 사용할 때면, 추가 데이터의 이름은 항상 action.payload가 됩니다. redux-logger로 내용을 찍어보면 데이터가 payload라는 이름으로 들어가 있는 것을 확인할 수 있습니다. import { createAction, handleActions } from "redux-actions"; const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; export const increa..
State Management/⚛ Redux 2020. 7. 18. 23:00

react-redux의 hook : useDispatch, useSelector

react-redux 7버전 이후 부터 생긴 훅으로 인해 connect HOC를 사용하지 않아도 된다. 그러니까 전에 이런 걸 했는데 이제 이런 귀찮은 짓을 하지 않아도 된다는 것이다. 만세~~~ function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) 그렇다면 react-redux 훅을 하나씩 살펴보자 useDispatch dispatch를 날리는 것입니다. 간단하죠! 아래 코드는 버튼을 눌릴 때마다 dispatch를 날립니다. (https://react-redux.js.org/api/hooks#usedispatch) dispatch의 값으로 action을 주면 됩니다. import React from 'react' i..
State Management/⚛ Redux 2020. 6. 27. 20:47

applyMiddleware, compose를 활용하여 enhancer 만들기 사용하기

https://redux.js.org/api/createstore createStore와 관련된 문서를 보면 다음과 같이 작성되어 있습니다. createStore(reducer, [preloadedState], [enhancer]) enhancer란 말 그대로 redux의 기능을 도와주는 미들웨어나 데브 툴즈와 같은 것들을 말합니다. 🚀 applyMiddleware란 무엇인가 https://redux.js.org/api/applymiddleware https://redux.js.org/api/compose 단순히 이렇게 작성함으로써 미들웨어를 사용할 수 있게 됩니다. 그러나 나중에 기술하겠지만 enhancer를 구성해서 연결시키는 게 더 좋습니다. // 일반적으로 store를 생성하는 법 const st..
State Management/⚛ Redux 2020. 6. 27. 07:41