[React] LocalStorage 사용하기

웹 스토리지 API https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

localStorage 찾는 법

localStorage.setItem

localStorage에 아이템 저장하는 방법

• localStorage.setItem("key", 10); : 그냥 값 전달
• localStorage.setItem("object", JSON.stringify({ key: 10 })) : 객체 전달

localStorage.getItem

localStorage에 있는 아이템을 불러오는 방법
주의해야되는 점은 무조건 문자열로 가져와진 다는 점!

• const item1 = localStorage.getItem("key");
• const item2 = JSON.parse(localStorage.getItem("object")); -> 객체 가져오는 방법

dummyList -> localStorage로 이동시키기

그 이후로 계속 작성되는 값들을 localStorage에 넣을 예정
App 컴포넌트가 처음에 마운트 되는 시점에 localStorage에서 값을 불러온다. 그리고 localStorage에 있던 diaryList를 사용해서 하면 된다.

그리고 만약에 onCreate, onEdit, onRemove 가 사용이 된다면 결국엔 reducer을 통해서 newState의 값을 사용하므로 이를 localState에도 setItem을 하여서 적용을 시켜주면 DB 처럼 사용이 가능하다.

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;
};
...
useEffect(() => {
  const localData = localStorage.getItem("diary");
  if (localData) {
    const diaryList = JSON.parse(localData).sort(
      (a, b) => parseInt(b.id) - parseInt(a.id)
    );
    dataId.current = parseInt(diaryList[0].id) + 1;
    dispatch({ type: "INIT", data: diaryList });
  } else {
    dispatch({ type: "INIT", data: [] });
  }
}, []);

근데 diaryList의 id 값에서 매번 새로운 id 값이 필요하기 때문에 정렬을 해가지고 가장 큰 id 값에 1을 더해서 localData에 저장을 한다.

하,,,,,,,,,,,id 문제때문에 2시간 정도 고민함,,,,,,,,,,,슈발,,