TIL-23.05.22

 

 

문제점 :

전역 상태 관리를 위해 Recoil을 사용했다. 여러 컴포넌트에서 사용하는 서버 데이터를 전역으로 저장했지만

새로고침을 하게되면 데이터가 증발하고, 그로 인해 전역 상태 데이터를 다시금 세팅하기 위해 api 호출이 진행된다.

새로고침이 되더라도 데이터가 유지되어야하는 필요성을 느껴, 데이터 유지를 위해 Web Storage 중 local storage를 이용하기로했다.

 

 

 

 

시도한점:

Recoil Effects로 스토리지를 연동하는 방법을 찾았다. useEffect와 같이 atom 내에서 side effect를 관리하기 위해 사용한다.

export const storageState = atom({
  key: "storageState",
  default: undefined,
  effects: [
    ({ setSelf, onSet }) => {
      const savedData = sessionStorage.getItem("item");
      // setSelf: atom 값을 설정 혹은 재설정
      if (savedData) setSelf(JSON.parse(savedData));

      // atom이 변화가 감지될 때 작동, Storage에 데이터 저장
      // setSelf에 의해서는 작동하지 않음
      onSet((newValue, _, isReset) => {
        isReset
          ? sessionStorage.removeItem("item")
          : sessionStorage.setItem("item", JSON.stringify(newValue));
      });
    }
  ]
});

 - setSelf : atom 값을 설정, 주로 Storage에 있는 데이터를 atom에 넣어줄때 사용

 - onSet: atom의 변화를 감지해 Storage에 데이터를 저장

 

데이터를 저장할때 주의해야할 점이 있었는데, 데이터를 저장할땐 문자열만 저장 가능하기 때문에 

JSON.stringify()를 통해 문자열로 변환 후 웹스토리지에 저장해주고,

JSON문자열 데이터를 JS에서 사용하기위해 JSON.parse()를 통해 객체로 변환 후 atom에 저장한다.

 

 

데이터를 로컬스토리지에 저장 후 내가 이용한 방법

  const [data, setData] = useRecoilState(storageState);

  useEffect(() => {
    if (!data) getFetchData().then(setData);
  },[data]);

데이터가 필요한 컴포넌트에서 , 로컬스토리지에 데이터가 저장되어있으면 api통신 요청을 하지 않는 식으로 활용했다.

 

 

 

 

 

알게된점:

모든 데이터를 웹스토리지에 저장하면 안되겠지만, 새로고침으로 인해 증발되면 안되는 데이터는 웹스토리지를 이용해 저장후 사용해도 좋을것같다.