처음 만난 리덕스 (Redux) 문서
13.6 Migration
이제 redux-persist와 관련된 마지막 기능으로 Migration 기능에 대해서 배워보도록 하겠습니다.
migration은 일반적으로 데이터베이스 분야에서 많이 사용하는 용어인데, 우리 말로는 이주, 이동이라는 뜻을 갖고 있습니다.
그래서 컴퓨터 분야에서 migration이라고 하면, 데이터를 한 쪽에서 다른 쪽으로 이동시키는 것을 의미하기도 하고, 데이터의 구조를 변경시키는 것이라는 의미를 가지기도 합니다.
그리고 redux-persist에서의 migration은 데이터의 구조를 변경시킨다는 의미에 더 가깝습니다.
Migration이 필요한 이유는, 웹애플리케이션이 이미 배포되어 각 사용자의 컴퓨터에 데이터들이 저장된 이후에 데이터의 구조가 변경될 수 있기 때문입니다.
그래서 제대로 migration을 해주지 않으면, 이전 구조로 저장된 데이터를 갖고 있는 사용자들의 컴퓨터에서 에러가 발생할 수 있습니다.
import { createStore } from 'redux';
import { persistStore, persistReducer, createMigrate } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers';
const migrations = {
0: (state) => {
return {
...state,
nickname: undefined, // nickname 속성 없음
}
},
1: (state) => {
return {
...state,
nickname: state.nickname, // nickname 속성 추가
}
}
};
const persistConfig = {
key: 'root',
storage: storage,
version: 1,
migrate: createMigrate(migrations, { debug: false }),
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
export default store;
이 코드는 redux-persist에서 migration을 적용한 예시 코드입니다.
먼저 migrations라는 객체에 각 버전 코드별로 state를 입력으로 받아, 변환된 state객체를 리턴하는 함수를 작성합니다.
그리고 createMigrate() 라는 함수를 사용하여, State를 변환시켜주는 함수를 생성하여 persistConfig의 migrate속성에 넣어주면 됩니다.
이렇게 하면 각 버전에 맞게 State가 변환되어 저장되고 관리됩니다.
Migration 기능이 유용하긴 하지만, 되도록이면 애초에 이런 migration이 자주 필요한 상황 자체를 만들지 않는 것이 좋습니다.
왜냐하면 migration도 결국 개발자가 구현하는 부분이기 때문에, 코드를 잘못짜서 migration이 제대로 이뤄지지 않을 수도 있고 중간에 State들이 누락 될 수도 있기 때문입니다.
그래서 결론적으로 redux-persist를 사용할 때는 꼭 저장이 필요한 데이터만 whitelist에 넣어서 사용하는 것이 좋습니다.
또는 반대로 blacklist를 활용해서 저장이 필요없는 데이터들은 제외시켜주는 방법도 있겠죠.
이 점을 잘 기억하면서 redux-persist를 사용하기 바랍니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.