LocalStorage를 일기 DB로 사용하기

Web Storage

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

 

seeionStorage: seeionStorage는 브라우저가 열려있는 동안만 저장이 된다.

LocalStorage: 브라우저를 닫아도 저장 공간에 저장되어 있다.

 

-LocalStorage 저장하기

 useEffect(() => {
    localStorage.setItem("item1", 10);
    localStorage.setItem("item2", "20");
    localStorage.setItem("item3", JSON.stringify({ value: 30 }));
  }, []);

객체는 문자열화 하여 저장해야한다.

 

-꺼내오기

  useEffect(() => {
    const item1 = localStorage.getItem("item1");
    const item2 = localStorage.getItem("item2");
    const item3 = JSON.parse(localStorage.getItem("item3"));
  }, []);

getItem을 사용하면 된다. 근데 출력해보면 문자열로 나온다. 기본적으로 LocalStorage에 들어가는 값은 문자열로 바뀌기 때문이다.

객체는 JSON.parse로 다시 객체로 복원시켜줄 수 있다.

 

활용하기

-App.js

이제 LocalStorage를 활용할거라서 dummyData는 지워준다. 변경되는 로직을 처리하는 한 가지 통로는 reducer 함수이다. 따라서 reducer에서 newState가 변경될 때 마다. LocalStorage에 데이터를 넣어주면된다.

const reducer = (state, action) => {
  let newState = [];
  switch (action.type) {
    case "INIT": {
      return action.data;
    }
    case "CREATE": {
      const newItem = {
        ...action.data,
      };
      newState = [newItem, ...state];
      break;
    }
    case "REMOVE": {
      newState = state.filter((it) => it.id !== action.targetId);
      break;
    }
    case "EDIT": {
      newState = state.map((it) =>
        it.id === action.data.id ? { ...action.data } : it
      );
      break;
    }
    default:
      return state;
  }

  localStorage.setItem("diary", JSON.stringify(newState));
  return newState;
};

따라서 이렇게 저장하는 기능을 넣어주면 새 일기를 쓸 때마다 저장된다.

---

일기 수정 페이지에서 제거하기 버튼 만들기

-DiaryEditor.js

  const { onCreate, onEdit, onRemove } = useContext(DiaryDispatchContext);

onRemove도 받아오기

  // 삭제 버튼
  const handleRemove = () => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      onRemove(originData.id);
      navigate("/", { replace: true });
    }
  };

삭제시 동작 할 함수

      <MyHeader
        headText={isEdit ? "일기 수정하기" : "새 일기쓰기"}
        leftchild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
        rightchild={
          isEdit && (
            <MyButton
              text={"삭제하기"}
              type={"negative"}
              onClick={handleRemove}
            />
          )
        }
      />

이렇게 버튼에 rightchild를 추가해준다. 삭제하기를 누르면 LocalStorage에서도 삭제된다.

---

컴포넌트 마운트시 LocalStorage에서 꺼내서 출력하기

-App.js

  useEffect(() => {
    const localData = localStorage.getItem("diary");
    if (localData) {
      // 로컬 스토리지에서 불러오고 내림차순으로 정렬
      const diaryList = JSON.parse(localData).sort(
        (a, b) => parseInt(b.id) - parseInt(a.id)
      );
      // 다음에 만들어질 일기의 id는 저장되어 있는 개수보다 커야된다.
      dataId.current = parseInt(diaryList[0].id) + 1;

      // 초기값으로 설정하는 액션
      dispatch({ type: "INIT", data: diaryList });
    }
  }, []);

이렇게 불러온다. 만약 불필요한 데이터가 localSorage에 들어있다면 에러가 발생하니 다 비우는 것이 좋다.