115일차 - 프로젝트 10일차

프로젝트를 시작한지 딱 10일이 되었다.

아직 백엔드에서 아직 DB가 완성이 되지 않아서 DB를 직접 확인 해보지는 못했지만, 더미 데이터와의 통신은 확인 했고 문제가 없었다.
그 후 css를 마지며, 코드를 정리하고 있다.
내일이 프로젝트를 마치는 날인데 걱정이 많다.

오늘의 가장 중요한 공부는 localStorage이다.

사이트를 종료하거나, 새로고침을 해도 state를 유지시키고 싶었다.
우선 커스텀 훅을 만들어서 state를 localStorage에 저장하는 함수를 생성했다.
이 커스텀 훅은 아래 참고자료 DaleSeo님의 블로그에서 가져왔다.

import { useState, useEffect } from "react";

function useLocalStorage(key, initialState) {
  const [state, setState] = useState(
    () => JSON.parse(window.localStorage.getItem(key)) || initialState
  );
  
  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);
  
  return [state, setState];
}

export default useLocalStorage;

그 후에 app.js에서 import를 받아서 저장 하고 싶은 state들을 아래와 같이 넣었다.

import useLocalStorage from "./UseLocalStorage";

const [isLogin, setIsLogin] = useLocalStorage("isLogin", false);
const [token, setToken] = useLocalStorage("token", null);
const [userData, setUserData] = useLocalStorage("userData", userInfoReset);

위와 같이 작성하니 새로고침해도 state가 유지되었다.

참고자료 :
제로초 - 로컬스토리지
DaleSeo - 로컬스토리지