[별첨] Recoil-Persist 적용 - 새로 고침 시 state 값 유지를 위하여

지금까지 진행한 프로젝트 중에 개발이 완성이 되어졌습니다.

현재, 새로 고침과 React-Query에 의존 시 사용자 측에서 불편한 점이 존재하기 때문에 코드 개선을 목적으로 구현하고자 합니다.

 

따라서 추가 개발을 위해 진행 한 것으로, Redux 탈피 하는 기법 중 하나로 사용하였으며, Recoil 방법도 사용하고자 합니다.

 

지금까지의 개발의 대한 문제점으로 새로 고침 시 state 값 유지가 되지 않음,

React-Query는 서버가 변경 시 일정시간 주기로 갱신하는 기술로 되어져 있으며,

이 점을 단점 개편을위해 진행 하도록 합니다.

 

백엔드에게 API 호출하여 데이터를 넘겨 줄 때 프론트엔드에서 충분한 데이터가 있어야 하는데, 갱신이 되지 않아 넘길 수 없는 부분이 존재하며, 이번 시간에는 Recoil-Persist를 활용하여 state 값을 저장 시키는 것을 목적으로 진행 하겠습니다.

 

Github : https://github.com/BerkleyLim/foodstor_pos

GitHub - BerkleyLim/foodstor_pos: This is the program on foot store pos machine.

 

 

1. Recoil-Persist 설치

$ npm install recoil-persist --save

 

이에, package.json을 확인 해보면 dependencies 목록에 설치 됨을 확인 할 수 있습니다.

 

 

2. Recoil-Persist 환경 설정

- 현재 Redux를 사용해 보셨다면, Recoil도 역시 손쉽게 사용 하실 수 있습니다.

- Recoil은 Redux와 비슷하게 state 값을 유지 시키는 방법 중 하나이며, React-Query와 함께 연동하여 사용을 많이 하는 것으로 알려져 있습니다.

- 따라서 이번 기회에 전문가 역시 학습을 하는 목적으로 하여 recoil-persist 설정을 하여 진행 해보겠습니다.

(1) App.tsx 에 RecoilRoot 넣기

- 이 경우, Recoil 을 사용하기 위해 component를 감싸 줘야 한다.

- 이전에 Recoil을 사용한 이력이 있기 때문에 적용 되어 있으면 안해줘도 된다.

import './App.css';
import {
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import Index from './component/index';
import { RecoilRoot } from 'recoil';


const queryClient = new QueryClient();

const App = () => {
  return (
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <Index />
      </QueryClientProvider>
    </RecoilRoot>
  );
}


export default App;

 

 

(2) 각각 recoil에 사용할 state 부분에 recoilPersist를 추가해주고, effects_UNSTABLE: [persistAtom] 넣어준다. 필자는 localStorage로 저장하는 방식으로 구성하였다.

 

기본 예시

import {atom} from 'recoil'
import { recoilPersist } from 'recoil-persist'

// 추가
const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // this key is using to store data in local storage
  storage: localStorage, // configure which storage will be used to store the data
  converter: JSON // configure how values will be serialized/deserialized in storage
})

export const userInfoState = atom({
  key: 'userInfo',
  default: {
      uno: 0
    , userName: ''
    , userAge: 0
    , userSex: ''
    , userPhone: ''
    , userNumber: ''
    , userPassword: ''
  } as UserInfoType,
  effects_UNSTABLE: [persistAtom],	// 추가
});

 

<userInfoState.tsx 예시>

import {atom} from 'recoil'
import { recoilPersist } from 'recoil-persist'

// 추가
const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // this key is using to store data in local storage
  storage: localStorage, // configure which storage will be used to store the data
  converter: JSON // configure how values will be serialized/deserialized in storage
})

export interface UserInfoVo {
  // userInfoVo에 담을 변수
  uno: number,
  userName: string,
  userAge: number,
  userSex: string
  userPhone: string,
  usernumber: string,
  userCardPassword: string,
  lno: number,
  pageNo: number,
  pageEventTitle: string,
  pageEventView: string,
  crtTime: string
}

export interface UserInfoType {
  uno: 0
  , userName: ''
  , userAge: 0
  , userSex: ''
  , userPhone: ''
  , userNumber: ''
  , userPassword: ''
};

export const userInfoState = atom({
  key: 'userInfo',
  default: {
      uno: 0
    , userName: ''
    , userAge: 0
    , userSex: ''
    , userPhone: ''
    , userNumber: ''
    , userPassword: ''
  } as UserInfoType,
  effects_UNSTABLE: [persistAtom],	// 추가
});

 

마찬가지로,

<foodState.tsx, logInState.tsx, userBankInfoState.tsx 에도 반영해준다.>

 

이 경우, 새로 고침 시 state 값은 초기화 되지 않고 유지가 가능하다.

 

 

마치며, 

지금까지 recoil-persist 를 적용하는 방법도 알아봤습니다.

현재, 제가 사용하는 방식 이외에도 더 간편하게 사용 할 수 있을 것으로 알고 있지만, 저는 처음으로 접해본 입장으로서 개발을 진행하였습니다.

이 경우 Redux로도 사용 할 수 있는 방법을 Recoil로도 적용을 해 본 결과 간편하고 사용하기 쉬운 점이 있다는 것으로 깨닫고 있습니다.

 

이것으로 state 값 관리는 Recoil로 관리하면 되고, 실시간 갱신을 위한 것은 React-Query로 적용하고, 많이 숙련이 되면 적용해야 하는 부분에서 사용하시면 될 것 같습니다.

 

이것으로 프로젝트를 모두 마치겠습니다.