[투두리스트 페어프로그래밍] recoil 새로 고침 시 전역 데이터 초기화

https://ella951230.tistory.com/entry/%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%ED%8E%98%EC%96%B4%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%A0%84%EC%97%AD%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-VS-get-API-%EC%9E%AC%ED%98%B8%EC%B6%9C

[투두리스트 페어프로그래밍] 전역상태관리 VS get API 재호출

 

0. 버그 배경

- 위 블로그 게시글에서 아침/점심/저녁 카테고리를 누를 시에 todoItem 을 불러와야하는데 get API 를 한번 더 요청하는 경우에는 서버 비용이 발생하고, 데이터(todoItem)이 같은데 다른 useState를 쓴다면 Single Source of truth 원칙에 위배된다.  따라서, 전역상태관리 라이브러리를 사용하기로 했었다.

- 많은 전역상태관리 라이브러리 중에 Recoil 을 사용하기로 결정했다(낮은 학습곡선)

- 하지만, recoil 로 전역상태를 관리할 시에 새로 고침 시 데이터가 날아가는 문제가 생겼다. 

새로고침 안하면 전역상태 데이터가 잘 불러와진다.

새로고침을 하면..초기화된다 ㅠㅠ

 

1. 해결책

이를 해결하기위해 recoil-persist 를 사용하자

import { atom } from "recoil";
import { TodoItem } from "../Pages/Todo/Todo";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

export const tokenState = atom({
  key: "tokenState",
  default: "",
});

export const todoItemState = atom<TodoItem[]>({
  key: "todoItemState",
  default: [],
  effects_UNSTABLE: [persistAtom],
});

하지만, recoil-persist는 recoil 상태를 로컬스토리지에 영속적으로 저장하는 라이브러리이다.

새로고침이나 페이지를 벗어나도 상태를 보존할 수 있는 라이브러리다.

아래처럼 로컬스토리지에 저장이 된다.

 

로컬스토리지에 사용자의 개인정보, 민감한 데이터를 저장하면 보안상의 위험이 증가한다고 알고있다. 

따라서, todoItem 은 사용자의 개인정보이기 때문에 recoil-persist 를 사용하면 보안상에 이슈가 있을 것 같다. 

 

로컬스토리지는 주로, 사용자가 어플리케이션에서 선택한 테마, 사용자가 마지막으로 본 페이지, 어플리케이션 설정과 같이 상태를 유지하면 사용자 경험을 향상시킬 수 있는 경우에 사용된다. 

 

그래서 중요한 데이터는 보안상의 이유로 서버 측에 영속적으로 저장하는 게 좋다.