useEffect Redux 사용

안녕하세요 : ) useEffect 외 todos 에 대한 코드와 todo를 삭제하는 로직도 같이 공유 주시면 다른분들이 코드를 이해하는데 도움이 될것 같아요! 질문을 통해 분석을 해보면, 삭제된 상태가 새로고침시 복구되는것을 해결하고 싶으신것으로 보여집니다. 코드만 봤을때는 정확한 원인을 알 수는 없으나, 삭제된 상태값이 복구된다면 아래 두가지를 의심해볼 수 있을것 같아요. 1. todos 배열 데이터가 리덕스 혹은 로컬상태(useState)값이 아닌 상수이다. 2. Todo알람을 삭제하는 메서드가 정상동작하지 않았다. 여기서 2번은 관련코드를 공유주시지 않아 확인이 어려워 넘어가도록 하겠습니다. 1번의 경우에는 리덕스 상태또한 휘발성 상태값이기 때문에, 브라우저의 로컬스토리지 나 indexDB와 같은 저장소에 저장해두지 않으면 새로고침시 초기상태값으로 돌아가게 됩니다. 만약 초기상태에 삭제하고자 했던 Todo 데이터가 있었다면, 새로고침시 다시 나타나게 될거에요!

투두리스트의 상태 관리에 관한 질문 감사드립니다. Redux를 사용하여 알림을 관리하는 경우, 페이지를 새로고침하거나 재 렌더링할 때 상태가 초기화되는 이슈가 생길 수 있습니다. 그 이유는 Redux 상태가 메모리에 저장되기 때문입니다. 웹 페이지를 새로고침하거나 재 렌더링할 때 메모리가 초기화되므로, Redux 상태도 초기화됩니다. 이 문제를 해결하기 위해선, 알림의 상태를 영구적으로 저장하는 방법을 사용해야 합니다. 로컬 스토리지나 쿠키 등을 사용하면 이를 해결할 수 있습니다. 또는, 서버에 상태를 저장하는 방법도 있습니다. 사용자가 알림을 삭제하면, 해당 정보를 로컬 스토리지나 쿠키, 서버에도 반영해야 합니다. 그리고 페이지를 새로고침하거나 재 렌더링할 때, 이 정보를 불러와서 Redux 상태를 업데이트해야 합니다. 예를 들어, 로컬 스토리지를 사용하는 경우 다음과 같이 구현할 수 있습니다. 1. 사용자가 알림을 삭제하면, 이 정보를 로컬 스토리지에 저장합니다. 2. 페이지를 새로고침하거나 재 렌더링할 때, 로컬 스토리지에서 정보를 불러와서 Redux 상태를 업데이트합니다. 이 방식을 사용하면, 페이지를 새로고침하거나 재 렌더링해도 알림의 상태를 유지할 수 있습니다. 다만, 이 방식은 사용자의 브라우저에만 적용되며, 다른 브라우저나 장치에서는 알림의 상태가 공유되지 않습니다. 알림의 상태를 여러 브라우저나 장치에서 공유하려면 서버에 상태를 저장해야 합니다.

1#1
2// 알림 삭제
3const newTodos = todos.filter((todo) => todo.id !== id);
4localStorage.setItem('todos', JSON.stringify(newTodos));
5
6
7#2
8// 페이지 로드 시 로컬 스토리지에서 알림 정보 불러오기
9const savedTodos = localStorage.getItem('todos');
10if (savedTodos) {
11    dispatch(loadTodos(JSON.parse(savedTodos)));
12}