[React] 미니프로젝트 - LocalStorage를 DB로 사용하기

현재는 자바스크립트데이터 >> 휘발성 데이터 이기때문에 현재 더미데이터+새로 추가한데이터들도 새로고침을 하면 다시 더미데이터만 남게된다.

 

 

Web Storage API - Web API | MDN

서버에 DB를 관리 할 수도 있지만 복잡해지므로 지금은 데이터 유지를 위해 WebStorage API중 로컬스토리지를 적용해 볼 것이다.

 

 

 

 

 

사용법

  useEffect(() => {
    localStorage.setItem('key', 10);
  }, [])

useEffect를 통해 불러올 데이터를 지정해주고 개발자콘솔에서 확인해본다

 

 

 

 

 

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

객체같은경우는 JSON.stringify로 직렬화를 시켜줘야한다. JSON.stringify()를 하면 문자열화되어 내용을 확인할 수 있다

key를 지워도 그대로 남아있는걸 확인할 수 있다.

 

 

 

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

객체를 localStorage에 넣었다가 꺼내쓸때는 다시 parse 해줘야한다. 안그러면 객체가아닌 문자열화 된 값을 볼 수 있다.

 

 

 

 

 

---

더미데이타 대신 localStorage값 이용하기

 

모든 data가 reducer를 통해서 변화하기때문에 reducer안의 newstate부분에 값이 들어가도록 할 것이다

 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;
}

localStorage에 실시간으로 수정되고 작성되고 삭제되는 데이터를 저장

(서버에 DB유지하고있는 듯한 모습)

 

 

 

 

 

 

 

 

 

컴포넌트가 mount 됐을 때 localStorage의 값을 꺼내 dataState기초값을 만들어주자

  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);

      console.log(diaryList);
      console.log(dataId);
    }
}

parse를 통해 직렬화되어있던 데이터를 다시 바꿔준 후 sort로 정렬해준다.

 

값이 제대로 뜬 것을 확인한 후 

dispatch함수를 사용해 상태변화(action)을 일으켜주자

 

  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 });
    }
  }, [])

새로고침을해도 이제 더미데이터없이 작성해 둔 데이터들이 저장되어 있는걸 확인할 수 있다

 

 

 

 

참고 :

- 한 입 크기로 잘라먹는 리액트