Recoil 새로고침 시 user 데이터 유지하기

 

• 로그인시 받는 유저 데이터 recoil state 는 새로고침시 날아감
  1. 새로고침시 마다 유저 정보를 API 요청 → XXXXXX
  2. recoil state 를 persist
     • localStorage를 사용하는 방법이 있음
       • 새로고침시 localStorage에 저장해둔 값을 state에 다시 입력
       • localStorageEffect.js

       function localStorageEffect(key) {
       	return ({ setSelf, onSet }) => {
       		const savedValue = localStorage.getItem(key);
       		if (savedValue != null) {
       			setSelf(JSON.parse(savedValue));
       		} else {
       			// 로컬 스토리지에 저장된 값이 없으면 로그아웃 처리
       			localStorage.removeItem(key);
       			localStorage.removeItem('acccessToken');
       			localStorage.removeItem('refreshToken');
       			if (window.location.pathname !== '/login') {
       				window.location.href = '/login';
       			}
       		}
       
       		onSet((newValue, _, isReset) => {
       			isReset
       				? localStorage.removeItem(key)
       				: localStorage.setItem(key, JSON.stringify(newValue));
       		});
       	};
       }
       
       export default localStorageEffect;
       

       • store/recoil/index.js

       export const userInfoState = atom({
       	key: 'userInfoState',
       	default: {
       		id: 'M12341234',
       		name: '김철수',
       		accessLv: 3,
       	},
       	effects: [localStorageEffect('user')],
       });