react-persist, localStorage를 사용하지 않고 새로고침시 데이터가 유지되는 방법이 있을까요??

새로고침을 하는 순간 페이지 DOM의 렌더링을 시작하기 때문에 리액트의 상태관리로는 해당 상태를 유지 못할 것 같습니다. 로컬스토리지도 사용못하는 경우에 해결방법은 url의 param 리액트의 경우 리액트 쿼리를 활용하는 방법일 것 같습니다. 검색버튼을 누를때 api를 보내는 주소에 검색조건들이 파라미터로 붙게 처리하면 될 것 같습니다. 그럼 새로고침을 해도 url은 같기때문에 같은 결과가 나올 겁니다.

안녕하세요! 검색 조건 상태 (필터)는 보통 url query param을 사용해서 보존합니다. 리액트에서 url query param에 접근해서 읽은 뒤, 그걸 검색 요청하는 api로 잘 전달만한다면 검색 결과는 동일하게 나올 것 같습니다. 다만, 검색 결과 자체를 유지하려면 결과 값을 어디다가 저장을 해야되긴 할 것 같네요. 스토리지를 못쓴다는게 localstorage만 인가요? 그렇다면 web api가 제공하는 다른 스토리지를 써보시는걸 추천드립니다. ex) indexedDB

react-persist나 localStorage 대신에, 다른 상태 관리 라이브러리를 사용하거나, 브라우저의 새로고침 이벤트를 감지하여 서버로부터 데이터를 다시 가져오는 방법 등이 있습니다. 1. 다른 상태 관리 라이브러리 사용하기 redux-toolkit 대신에, 다른 상태 관리 라이브러리인 MobX나 Recoil, Zustand 등을 사용할 수 있습니다. 이들 라이브러리는 상태를 관리할 때, react-persist나 localStorage와 같은 외부 저장소를 사용하지 않고, 자체적인 상태 저장 기능을 제공합니다. 2. 브라우저의 새로고침 이벤트 감지하기 브라우저의 새로고침 이벤트는 window 객체의 beforeunload 이벤트를 감지하여 처리할 수 있습니다. 이 이벤트는 페이지가 이동하기 전에 발생하므로, 이벤트 핸들러에서 서버로부터 데이터를 다시 가져오는 코드를 작성하면 새로고침해도 상태를 유지할 수 있습니다. 예를 들어, 아래와 같이 코드를 작성할 수 있습니다. 아래 코드에서는, useEffect 훅을 사용하여 컴포넌트가 마운트될 때, beforeunload 이벤트를 감지하는 핸들러를 등록하고, 컴포넌트가 언마운트될 때 핸들러를 제거합니다. 핸들러에서는 fetchDataFromServer 함수를 호출하여 서버로부터 데이터를 가져와서 상태를 업데이트합니다. 이 방법은 서버로부터 데이터를 다시 가져와야 하므로, 네트워크 비용이 들어갈 수 있습니다. 따라서, 가능하면 상태 관리 라이브러리를 사용하는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleBeforeUnload = async () => {
      // 서버로부터 데이터를 가져와서 상태를 업데이트합니다.
      const data = await fetchDataFromServer();
      updateState(data);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // ...
}