[React/Project] Recoil Persist 를 사용해 로컬스토리지에 데이터 저장/불러오기

[React/Project] Recoil Persist 를 사용해 로컬스토리지에 데이터 저장/불러오기

 

📌 사용하게 된 배경

✅ Recoil 사용하게된 이유

Recoil 을 사용해서 로그인 시 토큰과 유저 정보들을 가져와서 전역에서 사용했다.

게시글 작성 페이지는 로그인 시에만 접근이 가능하도록 했으며, 게시글을 작성 / 수정할 경우 해당 유저 데이터를 서버로부터 받아와서 게시글에 해당 정보를 불러와서 게시글을 분류했다.

게시글 수정을 할 경우에는 로그인된 유저의 데이터와 게시글 작성자의 유저 정보와 일치할 경우 수정 / 삭제 버튼이 렌더링 되도록 했다.

또한 수정 버튼을 클릭하면 해당 게시글의 작성자 정보와 게시글 정보를 가져와 바뀐 내용으로 대체해주었다.

 

✅ Recoil 사용하다가 겪은 문제점

이번 프로젝트는 Firebase 를 이용해서 데이터를 관리했다.

Firebase는 하루에 사용할 수 있는 송수신 데이터 용량이 정해져있다보니 이미지 관련 작업만 하면 할당량이 쭉쭉 닳았다.

코드를 잘못 짜서 무한 렌더링되는 일이 일어났는데, 서버로부터 데이터를 계속해서 요청하고 받는 과정을 거치다보니 Firebase storage 의 할당량이 끝나서 이미지를 더이상 불러올 수 없게 된 것이었다...!

 

그래서 멘토링으로 recoil persist 를 공부해보고 사용해보는 것은 어떨지 제안 받았다.

스토리지에 데이터를 저장해서 관리한다면 매번 리렌더링 될 때마다 서버로부터 데이터를 읽어오는 과정을 하지 않기 때문에 성능 면에서나, 데이터 관리 면에서나 효율적일 수도 있다고 한다.

 

Recoil 도 아직 Context 수준으로밖에 사용하지 못하는 상황이라서 새로운 것을 공부해서 적용한다는 것에 부담이 있었으나, 프로젝트도 어느 정도 기능 구현은 끝난 상태라 해볼만하다고 판단했다.

 

📌 Recoil Persist 이란?

* Persist : 지속하다, 계속하다, 살아남다, 없어지지 않고 계속 되다.

Recoil Persist 는 스토리지에 상태를 저장하고 동기화하기 위한 Recoil 의 라이브러리이다.

페이지가 리렌더링 되면 다시 서버로부터 데이터를 주고받아야 하기 때문에 성능 측면에서나 Firebase 데이터 관리 측면에서 효율적이지 못했다.

Recoil Persist 를 사용하면 로컬 스토리지나 세션 스토리지에 저장하고, 저장된 데이터를 불러와 사용하여 상태를 초기화되지 않도록 유지시켜줄 수 있다.

 

📌 설치하기

npm install recoil-persist
yarn add recoil-persist

 

✅ 설치 완료

// package.json
"recoil-persist": "^4.2.0",

 

📌 import

import { recoilPersist } from 'recoil-persist'

 

📌 사용하기

const { persistAtom } = recoilPersist();

Recoil Persist 를 사용하려면 atom 에 effects_UNSTABLE 를 추가해줘야한다.

export const userId = atom({
  key: "userId",
  default: null,
  effects_UNSTABLE: [persistAtom],
})

이후 atom 의 각 변경 사항은 localStorage에 저장되고 동기화됩니다.

 

✅ 저장할 스토리지 대상 지정하기

const { persistAtom } = recoilPersist({
  key: 'recoil-persist',
  storage: localStorage,
})

• key : 기본값은 recoil-persist 이다. key는 저장소에 데이터를 저장하는 데 사용된다.
• storage : 세션스토리지나 다른 스토리지로 스토리지 대상을 변경한다. 이를 설정해주지 않으면 기본으로 로컬스토리지가 사용된다.

 

📌 1v 에서 2v 로 마이그레이션하기

✅ atom 키 지정하지 않아도 됨

const {
   RecoilPersist,
   updateState
} = recoilPersist(
    ['count'], // atom 키를 지정할 필요가 없어짐
    {
        key: 'recoil-persist',
        storage: localStorage
    }
)

⬇️

const {
    persistAtom
} = recoilPersist(
    {
        key: 'recoil-persist', // 구성도 동일하게 유지
        storage: localStorage
    }
)

 

✅ persistence_UNSTABLE 제거

const counterState = atom({
  key: 'count',
  default: 0,
  persistence_UNSTABLE: { // atom 에서 제거하기
    type: 'log',
  },
})

⬇️

const counterState = atom({
  key: 'count',
  default: 0,
  effects_UNSTABLE: [persistAtom], // 추가하기
})

 

✅ RecoilPersist 컴포넌트 제거하기

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot initializeState={({set}) => updateState({set})>
      <RecoilPersist /> // RecoilPersist 컴포넌트 제거하기
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

⬇️

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot> // initiallizeState 속성과 updateState 함수를 제거
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

 

 

 

 

 

 

---

참고 : recoil persist npm 문서
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

 

🔅 멋쟁이사자처럼 프론트엔드 4기 파이널 프로젝트

📝 당근마켓 클론코딩

🧑🏻‍💻 작업 인원 : 5인

🕑 프로젝트 기간 : 23.03.10 ~ 03.28

🔧 기술 스택

    • Toolchains : Vite

    • Style : Styled Component

    • 상태 관리 : Recoil

    • Severless : Firebase