[리팩토링] 새로고침 해도 검색 결과가 남아있도록 하기

// 검색 버튼 클릭 시 실행
const searchHandler = () => {
    if (!selectedProvider) globalSearch("전체", selectedTag, selectedTerm);
    else globalSearch(selectedProvider, selectedTag, selectedTerm);

    // 통합 검색의 경우 통합 검색 페이지로 이동
    if (type === "header") {
      router.push(`/global-search`);
    }
};

기존에는 배급사와 입력한 태그, 입력한 검색어를 바탕으로 globalSearch를 호출해서 검색 API를 호출했었다.

이렇게 호출해서 스토어에 검색어들도 저장해놓고, 이걸 다시 불러와서 검색창에 적용해놨다.
(페이지가 이동돼도 입력한 검색어를 볼 수 있게!)

그런데 새로고침 하니까 검색어가 날라가는 현상이. . . .

 

---

 

그래서 쿼리스트링으로 현재 URL에 검색어들을 등록하도록 리팩토링하였다.

// 검색 버튼 클릭 시 실행
const searchHandler = () => {
    if (!selectedProvider) globalSearch("전체", selectedTag, selectedTerm);
    else globalSearch(selectedProvider, selectedTag, selectedTerm);

    // 현재 페이지의 쿼리스트링 생성
    const params = new URLSearchParams();
    params.set(
      "provider",
      engProviderMapping[selectedProvider ? selectedProvider : "전체"],
    );
    if (selectedTag) params.set("tag", selectedTag);
    if (selectedTerm) params.set("term", selectedTerm);

    // 현재 페이지 URL에 쿼리스트링 적용
    router.replace(`/global-search?${params.toString()}`);

    // 통합 검색의 경우 통합 검색 페이지로 이동
    if (type === "header") {
      router.push(`/global-search?${params.toString()}`);
    }
};

next/navigation의 URLSearchParams 객체를 생성!
→ 쿼리스트링 파라미터를 다룰 수 있다.

params.set으로

- selectedProvider가 있으면 그 값 사용, 없으면 '전체' 사용
engProviderMapping을 통해 영어 코드로 변환한 값을 "provider" 파라미터에 설정

- selectedTag가 존재하면 "tag" 파라미터에 해당 값 추가

- selectedTerm이 있으면 "term" 파라미터에 해당 값 추가

 

  router.replace(`/global-search?${params.toString()}`);  

그리고 Next.js의 라우터를 사용하여 현재 페이지의 URL을 업데이트 한다.
router.replace는 페이지 이동 없이 URL만 변경한다!

또 검색창의 type이 header인 경우에는 페이지 이동이 필요한데,
쿼리스트링을 추가해서 이동시키도록 한다.

 

---

이렇게 하면 URL에 쿼리스트링으로 내가 선택한 배급사랑 검색어가 잘 들어간다.

 

이제 이 쿼리스트링 안에 담긴 검색어로 새로고침 할 때마다 검색해줘야 한다.

const searchParams = useSearchParams();

우선 useSearchParams()로 현재 페이지 URL에 포함된 쿼리 파라미터를 읽어온다.

 

useEffect(() => {
    const providerParam = searchParams.get("provider");
    const tagParam = searchParams.get("tag");
    const termParam = searchParams.get("term");

    if (providerParam)
      setSelectedProvider(provMapping[providerParam] || "전체");
    setSelectedTag(tagParam || "");
    setSelectedTerm(termParam || "");

    if (providerParam)
      globalSearch(
        provMapping[providerParam] || "전체",
        tagParam || "",
        termParam || "",
      );
  }, [
    searchParams,
    setSelectedProvider,
    setSelectedTag,
    setSelectedTerm,
    globalSearch,
]);

그리고 serachParams.get으로 특정 값을 얻을 수 있어서, 쿼리스트링의 provider, tagParam, termParam을 불러온다.
그리고 스토어에 있는 상태 업데이트 함수를 이용해서 배급사, 태그, 검색어를 업데이트 해주고...!!
이걸로 globalSearch 호출까지 해주면..!!

새로고침 할 때마다 요청을 보내서 원래의 결과값을 받아온다.

useEffect를 쓰는 게 가장 효율적인 방법이 맞는지는 모르겠다... o.O