230614 React 투두리스트 localStorage에 저장하기

230614 React 투두리스트 localStorage에 저장하기

React 과정에서 선발대(?)라는 수준별 학습에 대한 개별 과제로 만들고 있는 개인과제인 투두리스트의 데이터를 localStorage에 저장하고 불러와서 브라우저가 새로고침 되어도 데이터가 유지되는 기능을 구현했다.

 

localStorage에서 불러오기

처음 해야 할 것은 페이지에 접속했을 때 이미 localStorage에 데이터가 있다면 불러오는 것이다.

데이터를 getItem()으로 가져와서 JSON.parse를 사용하여 분석을 하면 원래 데이터가 나온다.

useEffect(() => {
  const todoData = localStorage.getItem('todoData')
  try{
    const parsedTodoData = JSON.parse(todoData)
    if(parsedTodoData) {
      const validatedData = parsedTodoData.filter(todo => validateTodo(todo))
      setTodos(validatedData)
    } else {
      setTodos([])
    }
  } catch (error) {
    console.error('localStorage에서 데이터를 가져올 수 없습니다.')
    setTodos([])
  }
},[])

const validateTodo = (todo) => {
  const { id, title, body, isDone } = todo
  if(typeof id !== 'number') return false
  if(typeof title !== 'string') return false
  if(typeof body !== 'string') return false
  if(typeof isDone !== 'boolean') return false
  return true
}

 

localStorage에 저장하기

Todo 데이터가 바뀌는 지점인 Todo 생성, 변경, 삭제하는 모든 함수에
로컬 스토리지에 저장하는 함수를 마지막에 추가하면 된다.
하지만 모든 조작하는 함수에서 호출하도록 하면 코드의 반복이 늘어난다.

다른 방법으로는 저장해야 하는 Todo 데이터가 useState로 관리되고 있기 때문에
useEffect를 사용하면 변화가 생길 때 원하는 함수를 실행할 수 있다.

  useEffect(() => {
    if(todos) {
      const todosString = JSON.stringify(todos)
      localStorage.setItem('todoData',todosString)
    }
  },[todos])