React(6) 〓 Local Storage

Local Storage

Local Storage는 js에 이미 있는 기능으로 데이터를 반영구적으로 저장할 때 사용합니다.

제일 많이 쓰는 것만 보자면 getItem과 setItem이 있고 get, set이라는 이름답게 저장소에서 데이터를 얻거나 지정하는 겁니다.

(removeItem, clear도 있는데 이름만 들어도 무슨 기능을 하는지 대강 알 겁니다)

  const [notes, setNotes] = React.useState(
    JSON.parse(localStorage.getItem("notes")) || []
  );

  const [currentNoteId, setCurrentNoteId] = React.useState(
    (notes[0] && notes[0].id) || ""
  );

  React.useEffect(() => {
    localStorage.setItem("notes", JSON.stringify(notes));
  }, [notes]);

useState와 useEffect를 이용해서 간단하게 활용해 볼 수 있습니다.

처음 문단에서는 localStorage에서 notes라는 이름으로 저장한 것을 불러오는 거고요,

두 번째 문단에서는 값이 존재할 때 화면을 띄우고 아니면 비우는 겁니다.

마지막으로 세 번째 문단에서는 localStorage에서 notes라는 이름으로 저장하는 겁니다.

​

쓸 때마다 JSON.parse, JSON.stringify라는 표현이 나오는데 이유는 저장할 때 stringify 안 해 주면 배열 혹은 객체가 전환되지 않아 JSON 형태에 넣기에 부적절한 코드가 되므로 작성하는 겁니다.

불러올 때도 마찬가지로 JSON 형태 그대로 보내면 배열에 받기에 부적절한 코드가 되니 JSON.parse를 쓰는 겁니다. 그냥 변수 하나를 쓸 땐 안 하셔도 됩니다.