로컬스토리지를 이용한 데이터 저장

리액트와 로컬스토리지를 이용한 데이터 저장

간단한 투두리스트를 이용해 알아보자

먼저 코드를 보자

const App = () => {
  const [input, setInput] = useState("");
  const [todo, setTodo] = useState(
    () => JSON.parse(localStorage.getItem("todo")) || []
  );
  const ref = useRef(1);
  const onClick = (e) => {
    e.preventDefault();
    const newData = { id: ref.current++, text: input };
    setTodo((prev) => [...prev, newData]);
    setInput("");
    localStorage.setItem("key", ref.current);
  };
  const onDelete = (id) => {
    setTodo(todo.filter((item) => item.id !== id));
  };

  useEffect(() => {
    localStorage.setItem("todo", JSON.stringify(todo));
    const a = localStorage.getItem("key");
    ref.current = +a;
  }, [todo]);

  return (
    <StyledApp>
      <form action="" onSubmit={onClick}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button>Add</button>
      </form>
      <ul>
        {todo.map((item) => (
          <li key={item.id} onClick={() => onDelete(item.id)}>
            {item.text}
          </li>
        ))}
      </ul>
    </StyledApp>
  );
};

 const onClick = (e) => {
    e.preventDefault();
    const newData = { id: ref.current++, text: input };
    setTodo((prev) => [...prev, newData]);
    setInput("");
    localStorage.setItem("key", ref.current);
  };

onClick 함수 실행 시 setTodo를 이용해 데이터를 추가한 후
ref를 이용한 key값도 같이 localstorage에 보낸다.
useEffect에서 key데이터를 set하면 페이지 새로고침 시에 같이 초기화된다.
key set은 꼭 onClick에서 처리

useEffect(() => {
    localStorage.setItem("todo", JSON.stringify(todo));
    const a = localStorage.getItem("key");
    ref.current = +a;
  }, [todo]);

useEffect를 이용해 todo state가 변경 시
localstorage에 데이터를 보낸다.
이때 key값을 받아오는 이유는 (페이지 새로고침 시에 key값 중복을 막기 위해)

그리고 setState 함수에는

 const [todo, setTodo] = useState(
    () => JSON.parse(localStorage.getItem("todo")) || []
  );

이 코드를 적용하는데, setState를 콜백으로 실행해서 local에 있는 데이터를 가져온다
이 코드로 인해 페이지가 새로고침 되어도 데이터 유지가 가능해진다.
이 코드로 인해 delete처리 시 코드를 따로 칠 필요가 없다.