일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- BlockFormattingContext
- 이즐 #ezl #욕나오는 #교통카드
- ?? #null병합연산자
- useQueryClient
- accordian
- CustomHook
- ignore padding
- debouncing
- 서초구보건소 #무료CPR교육
- Carousel
- 화살표2개
- es6
- vite
- createPortal
- tailwindCSS
- 문제해결
- alias설정
- parent padding
- 부모요소의 패딩 무시
- 함수형프로그래밍
- 부모패딩
- 리액트
- react
- 조건부스타일
- QueryClient
- BFC
- twoarrow
- 제어컴포넌트
- transition
- DOM
Archives
- Today
- Total
프론트엔드 첫걸음
redux persist migration 본문
- redux-persist
- Redux 상태를 브라우저 localStorage나 sessionStorage에 저장해 앱 새로고침 후에도 유지.
- 마이그레이션
- persisted state 구조가 변경됐을 때 버전에 따라 변환해서 이전 데이터를 새 포맷으로 맞춰줌.
- 앱 업데이트 시 state 구조가 바뀌어도 예전 데이터를 안전하게 변환.
- 예전 버전 사용자가 업데이트된 앱을 열었을 때 에러 방지
- persisted state 구조가 변경됐을 때 버전에 따라 변환해서 이전 데이터를 새 포맷으로 맞춰줌.
✅ migrations
const migrations = {
0: (state) => {
return {
...state,
device: undefined
}
},
1: (state) => {
return {
device: state.device
}
}
}
- 스토어 버전별 데이터 변환 함수들.
- 버전이 올라갈 때 createMigrate가 현재 버전과 비교해서 필요한 마이그레이션 실행.
- 버전별 동작
- 0: 기존 상태에서 device만 초기화(삭제).
- 1: device만 남기고 나머지 상태는 제거.
✅ persistConfig
const persistConfig = {
key: 'primary',
version: 1,
storage,
migrate: createMigrate(migrations, { debug: false }),
}
- key: localStorage에 저장될 이름(prefix).
- version: 현재 상태 버전 (마이그레이션 시 기준).
- storage: 사용할 스토리지(localStorage).
- migrate: 마이그레이션 함수 설정.
✅ persistReducer
const finalReducer = persistReducer(persistConfig, reducer)
- key: localStorage에 저장될 이름(prefix).
- version: 현재 상태 버전 (마이그레이션 시 기준).
- storage: 사용할 스토리지(localStorage).
- migrate: 마이그레이션 함수 설정.
✅ persistReducer
const finalReducer = persistReducer(persistConfig, reducer)
- 기존 reducer를 감싸서 persist 기능 추가된 reducer 생성.
✅ configureStore
export default function configureStore() {
let store = createStore(finalReducer)
let persistor = persistStore(store)
return { store, persistor }
}
- store: Redux 스토어 생성
- persistor: 상태를 로컬스토리지와 연결하고 복원할 수 있게 해주는 객체
3. 데이터 흐름
- 앱 시작 시 persistStore가 localStorage에서 데이터 읽음.
- 저장된 버전과 persistConfig.version 비교.
- 다르면 migrations 실행 → 데이터 변환 후 reducer에 전달.
- 변환된 상태를 store에 로드.
[참고]
https://dev.to/hossain45/how-to-persist-user-info-using-redux-persist-with-typescript-54g9
'개발 공부 > React' 카테고리의 다른 글
JSX와 Babel의 변환 과정 정리 (0) | 2025.06.23 |
---|---|
[React Router] useBlocker 이해하기 (0) | 2025.03.03 |
useLocation (0) | 2023.07.18 |
김민태 프론트엔드 강의 - javascript로 React 만들기 (0) | 2023.03.11 |
forEach(parent.appendChild.bind(parent)) 이해하기 (0) | 2023.03.03 |