인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

AI 인턴의 답변은 제 답변이 아닌 인공지능으로 생성된 답변이라 정확하지 않을 수 있음을 알려드립니다!

우선 브라우저에서 동작하는 리액트 앱에 보관한 데이터는 일시적으로만 존재하기 때문에 새로고침시 초기화 됩니다. 휘발성 데이터라고 생각하시면 될 것 같아요

따라서 이런 문제를 해결하기 위해 보통은 백엔드 서버와 데이터베이스를 활용하게 되는데요 그런데 여기까지 가면 너무나도 할 일이 많아지게 됩니다. 🥲 백엔드 서버까지 만들어야 하거든요

그래서 더 쉬운 방법으로는 브라우저에 내장되어있는 데이터베이스에 데이터를 보관하는 방법도 사용됩니다. 그리고 이 브라우저의 내장 데이터베이스를 웹 스토리지라고 부릅니다. 웹 스토리지에 대해서는 우리 강의의 마지막 섹션에서 다루고 있으니 강의를 쭉 수강하시는 걸 권장드립니다.

만약 웹 스토리지부터 먼저 살펴보고 싶으시다면 아래의 공식문서를 참고해 사용해보시면 좋을 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

알려주신 코드들은 App.jsx 파일에 추가하면 되는건가요?

코드추가를 해봤는데 입력한 데이터의 첫번째는 제외하고 저장이 됩니다. 또한 삭제를 한 데이터는 새로고침을 해도 다시 저장되어서 나타나는데 이부분은 어떻게 해야하나요?? 혹시 다음 강의들에 이 내용이있나요??

안녕하세요, 인프런 AI 인턴입니다. hg05095님.

새로고침을 하였을 때 기본 mockData 만 나타나는 문제는 저장된 데이터가 브라우저의 로컬스토리지나 서버 같은 영구 저장소에 저장되지 않아서 발생할 가능성이 높습니다. 사용자가 데이터를 추가할 때마다 그 데이터를 로컬 스토리지에 저장하고, 페이지가 로드될 때 로컬 스토리지에서 데이터를 불러와 화면에 나타나도록 하는 방법을 사용하시면 문제를 해결할 수 있습니다.

1. 로컬 스토리지에 데이터 저장하기: 할 일을 추가한 후에는 해당 데이터를 로컬 스토리지에 저장해야 합니다. 이를 위해 setItem 메서드를 사용할 수 있습니다.

   // 할 일 데이터 추가 후
   localStorage.setItem('todoList', JSON.stringify(todos));
   

2. 로컬 스토리지에서 데이터 불러오기: 페이지가 처음 로드될 때, 로컬 스토리지에 저장된 데이터를 불러와 상태로 설정해야 합니다. 이는 useEffect를 통해 구현할 수 있습니다.

   useEffect(() => {
    const storedTodos = localStorage.getItem('todoList');
    if (storedTodos) {
      setTodos(JSON.parse(storedTodos));
    }
   }, []);
   

이렇게 하면 새로고침을 해도 사용자가 추가한 할일 데이터가 유지됩니다. 하지만, 기존 코드에서 잘못된 부분이 있거나 다른 설정이 필요하다고 생각되신다면, 더 세부적인 디버깅이 필요할 수 있습니다.

관련해서 유사한 질문과 답변을 본 링크에서 확인하실 수 있습니다:
- “Localstorage에 정상적으로 저장되었지만 새로고침시 로딩되지 않습니다.”

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.