[React] localStorage 사용해 List 데이터 JSON으로 저장하기

모달창으로 작성한 데이터가 리스트 화면에 뜬다고 해서 끝이 아닙니다.

현 단계에서 새로고침을 하면 화면에 리스트 아이템이 사라지니까요.

데이터를 저장하는데에는 서버나 클라우드를 사용해도 되겠지만,

클라이언트 단, 그러니까 브라우저상에 저장할 수 있는 웹 스토리지(local storage, session storage) 중

localStorage를 사용해 이전의 mock데이터를 옮겨주고, 새로 추가하는 데이터 또한 새로고침해도

보여지도록 하겠습니다.

 

우선 초기 데이터 세팅을 합니다.

const initialPostData = localStorage.getItem("contents")
  ? JSON.parse(localStorage.getItem("contents"))
  : [];

그리고 이 초기 데이터를 contents state의 mock데이터 대신 넣어줍니다.

  const [contents, setContents] = useState(initialPostData);

localStorage에 contents라는 이름의 데이터가 없으므로 빈 배열[]이 반환되고,

contents.length가 0이라면 콘텐츠가 없다는 표시를 해주도록 만들었기에 위와 같이 나타납니다.

 

다음으로 리스트(contents, post)관련 setState가 일어나는 곳에

localStorage.setItem 메소드로 데이터를 가져옵니다.

현재는 onCreate에 setContents가 있으므로 여기에 하나 넣어줍니다.

  const onCreate = () => {
    const newPost = {
      id: Date.now(),
      location,
      title,
      sort,
      address,
      call,
      visitedAt,
    };
    setContents([...contents, newPost]);
    localStorage.setItem("contents", JSON.stringify([...contents, newPost]));
    setNewPostInputs({
      location: "",
      title: "",
      sort: "",
      address: "",
      call: "",
      visitedAt: "",
    });
  };

참 이 부분 id 넣는 방법을 리팩토링했습니다.

Data.now()를 통해 현재 post를 생성하는 당시 날짜로 자동 지정되어 좀 더 쉽게 유일성을 확보했습니다.

setContents([...contents, newPost])까지 동일하고,

이후 따라오는 localStorage.setItem() 메소드를 통해 모달창에 입력하는 데이터가 JSON형태로 local storage에 저장됩니다.

그러면 초기 데이터 세팅할 때 작업한 getItem()메소드를 통해 입력한 데이터가 initialPostData 상수에 저장되고,

이 상수는 useState로 상태관리되어 리스트에 나타납니다.

 

개발자도구 > 애플리케이션 > local storage를 보면 키 로 contents가, 값으로 위와 같은 json데이터를 볼 수 있습니다.

 

참고한 글

이전에 react todo list 만들기로 기록했던 포스트

https://study-logs.tistory.com/10

Todo List 만들기로 배우는 React(feat.Styled component in emotion) - 8