[React] Todo List 만들기 (#3 로컬 스토리지 저장하기)

이전 글

[React] Todo List 만들기 (#1 개선사항 정리)

[React] Todo List 만들기 (#2 필터링 개선하기)

 

🔧 목표

• 로컬 스토리지(Local Storage)를 사용하여 데이터를 저장한다.

  리스트에 추가한 데이터는 새로고침/재접속을 할 때마다 초기화 된다. 이는 별도의 데이터베이스를 사용하지 않고 브라우저 내에서만 데이터가 처리되기 때문이다. 이번 포스팅에서는 이러한 문제를 해결하기 위해 로컬 스토리지를 활용하여 데이터를 저장하는 방법을 다룰 것이다.

 

💡 Tips

-  Local storage : 브라우저를 종료하고 재시작해도 데이터가 유지된다. (ex. 자동 로그인)
-  Session storage : 브라우저 세션이 종료되면 데이터는 자동으로 삭제된다.

---

Local Storage에 데이터 저장하기

• localStorage.setItem('key', 'value')로 저장하고, localStorage.getItem('key')로 데이터를 불러온다,
• 객체와 배열의 데이터는 JSON.stringfy()로 JSON 형태의 문자열로 변환하여 저장하고, 불러올 때는 JSON.parse()를 사용해 다시 객체로 변환한다.

#1. 기존 코드

const [todos, setTodos] = useState([]);

• 현재 todos는 빈 배열을 받고 있는데 이 부분을 수정할 예정

---

1. 할 일 목록이 업데이트될 때마다 로컬 스토리지에 저장하는 함수 추가

// todos가 업데이트되면 localStorage에 데이터 저장한다. 
  useEffect(() => {
    // 데이터 저장 : JSON 형태의 문자열로 변환한다.
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

• useEffect을 사용해 todos가 업데이트 되었을 때 값을 저장한다.
• value(todos)를 JSON.stringfy()로 JSON 자료형으로 변환한다.
• 두번째 인자는 매개변수로 받은 state가 변경될 때마다 호출될 수 있도록 넣어준다.

2. useState를 사용하는 부분에서 로컬 스토리지를 가져오도록 수정한다.

function storeTodos() {
  // 데이터 출력 : todos라는 key를 불러온다.
  const todos = localStorage.getItem('todos');
  return todos ? JSON.parse(todos) : [];
}

• localStorage.getItem()를 사용해 ‘todos’라는 key를 불러온다.
• todos가 존재한다면  JSON.parse()로 변환된 객체를 불러오고, 없다면 빈 배열을 가져온다.

3. 컴포넌트가 마운트될 때, 초창기 값을 가진 함수를 불러오도록 수정한다.

const [todos, setTodos] = useState(storeTodos);

이제 페이지를 새로고침하거나 브라우저를 재실행해도 기존의 데이터가 유지되는 것을 확인할 수 있다.

 

광클의 새로고침

---

🛫 마치며

다른 사람들의 코드를 보고 무작정 따라하기만 하는 것보다는, 포스팅 때문에라도 글을 써야하다보니 검색을 통해 이론을 더 깊이 이해할 수 있게된다. 아직 용어에 익숙치 않고 개발 분야의 문장 형식(?)도 미숙하기에 남들은 어떻게 쓰나…하고 검색하는 과정에서 새로운 지식을 얻게 된다.

특히, useEffect의 두 번째 매개변수 인자를 ‘의존성 배열’이라고도 부르던데, 의존성 배열을 잘 관리하지 못하면 버그가 발생할 수 있으므로 가급적 쓰지 않는 것을 권하는 글들도 종종 보였다. 이 주제에 대해서도 추가로 공부하는 것도 좋겠다.

 

전체 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/CircleYoo/Todo-List

GitHub - CircleYoo/Todo-List