문제!

Search 페이지 컴포넌트를 만들고 있는 중이다.
그런데 사용자가 더 편하게 쓰게 해주려고 고민했던게 문제의 발단이다.

어떤 페이지에서 무언가 검색을 할 때 /search/somgthing/페이지로 이동을 한다.

어떤 페이지에서 뒤로가기 해서 검색 페이지에 오면 검색창에 입력했던걸 그대로 두고,
검색 페이지에 처음오면 검색창에 아무것도 입력되지 않은 상태를 만들고싶었다.
그러면서 개발자가 검색페이지로 이동 할때도 번거롭지 않게 해주고 싶었다.

해결과정

그리고 유저는 아래와 같이 사용할 때 제일 좋은 사용자 경험을 느낄 수 있을거라 생각한다.

1. input으로 자동으로 포커싱이 된 후 유저는 검색어를 입력한다.
2. 검색어를 선택 후 페이지가 이동된다.
3. 만약 유저가 검색어 선택 후 뒤로가기버튼을 누르면 검색값이 유지된다.
4. 한번더 뒤로가기를 한 후 검색 페이지로 들어오면 검색값이 없어진다.

문제발생

이때 4 부분에서 문제가 발생했다.
search 페이지에 처음 방문했을 때는 input값을 비워줘야 하지만 다시(뒤로가기로) 방문 했을때는 원래 있던 input값을 넣어줘야 한다는것이다.

여기서 원래 있던 input값을 넣어주는건 간단했다.(뒤로가기로 방문)
Recoil을 사용해 값이 있다면 넣어줬다.

1. state, query string으로 넘겨준다?

근데 첫 방문일때 Recoil에 저장된 input값을 삭제 해줘야 하는데
search 페이지로 이동할때마다 useNavigate를 사용할 때 state를 넘겨주거나
쿼리스트링을 넘겨주는 방법은 안됐다. 전부다 캐싱돼서 뒤로가기가 작동해서 그런것같다.

2. 해당 페이지로 넘어가면 수동으로 reset 함수를 호출한다?

그렇다고 해당 페이지로 이동할 때마다 개발자가 직접 reset 함수를 호출해주는건 맞지 않다고 생각했다.
이 방법을 쓰면 실수로 넣지 않을수도 있고 개발자 경험이 좋지 않아진다고 생각했기 때문이다.

3. 뒤로가기로 온 페이지인지 확인을 해본다?

그러다 떠오른 방법이 뒤로 왔는지 여부를 확인하면 된다고 생각했다.
처음에는 onpopstate 이벤트 리스너를 붙여주는 방법을 찾았는데 이건 POP 됐을 때만 작동한다.
그러고서 e.persisted를 찾게 됐는데 얘는 현재 페이지가 캐시에서 불러온건지 확인한다.
근데 리액트에서는 작동을 하지 않아서 다른 방법을 찾아보니 있었다.

갓갓 공식문서를 하나씩 뒤져보다 usenavigationtype 라는 녀석을 보게 되었다.

This hook returns the current type of navigation or how the user came to the current page; either via a pop, push, or replace action on the history stack.

이 훅은 히스토리 스택에서 팝, 푸시 또는 바꾸기 동작을 통해 현재 탐색 유형 또는 사용자가 현재 페이지로 이동한 경로를 반환합니다.

declare function useNavigationType(): NavigationType;

type NavigationType = "POP" | "PUSH" | "REPLACE";

바로 내가 그토록 찾았던 방법이 여기 있었다.
다음부턴 공식문서를 제일 먼저 찾아봐야겠다.

문제해결

import { useNavigationType } from 'react-router-dom';

...

const SearchPage = () => {
  const navigationType = useNavigationType();
  const { resetSearchState } = useSearchPageState();

  useEffect(() => {
    if (navigationType === 'PUSH') {
      resetSearchState();
    }
  }, []);
  return ( ... );
};

export default SearchPage;

위처럼 현제 navigation 방법이 PUSH일때만 searchState를 reset해주었다.
그렇게 해서 유저는 처음에 검색 버튼을 눌러서 검색 페이지를 이동했을 때만 빈 값을 보게된다.
바로 아래처럼!