🔍 검색 페이지 리팩토링: Query String 활용하기

🔍 search 페이지의 상태관리 ?

검색 자체는 /list, /map 페이지에서 이루어지고, 검색을 위한 옵션을 선택하는 /search 페이지

그래서 처음에는 /search 페이지의 URL에 검색 관련된 쿼리스트링이 붙는 것이 어색하다고 느껴져서
이미 사용중이던 상태 관리 라이브러리 zustand로 관리하는 방향으로 구현했었다.

그런데 문제가 있었다 !

❗️ 문제 상황

✔️ 새로고침 시 검색 결과 유지 불가
✔️ URL 공유 시 검색 상태 전달 불가
✔️ 뒤로 가기/앞으로 가기 시 검색 상태 유지 불가

🛠️ Query String으로 리팩토링 하기

그래서 상태로만 관리하던 검색 상태를 쿼리 스트링(Query String) 기반으로 변경하기로 결정했다.
useSearchParams를 활용하여 URL과 검색 상태를 동기화하여
뒤로 가기, 새로고침 시에도 검색 상태를 유지하고 검색어를 포함한 URL을 공유할 수 있도록 개선하기로 했다.

✅ React의 Query String 관련 포스팅

• updateQueryString.ts

export const updateQueryString = (
  paramsToUpdate: Record<string, string | null>
) => {
  // 현재 URL의 쿼리 스트링을 가져와 새로운 URLSearchParams 객체를 생성
  const params = new URLSearchParams(window.location.search);

  // paramsToUpdate 객체를 순회하며 key-value를 업데이트
  Object.entries(paramsToUpdate).forEach(([key, value]) => {
    if (value !== null) {
      // key-value 설정( 이미 있다면 덮어씀 )
      params.set(key, value);
    } else {
      // value 가 null 일 경우 key 삭제
      params.delete(key);
    }
  });

  // 쿼리 스트링을 문자열로 반환
  const queryString = params.toString();
  // 새로운 URL 생성 ( 쿼리 스트링이 없을 경우 pathname만 유지 )
  const newUrl = queryString
    ? `${window.location.pathname}?${queryString}`
    : window.location.pathname;

  // 브라우저 히스토리를 쌓지 않으면서 URL 업데이트
  window.history.replaceState(null, '', newUrl);
};

• createApiUrl.ts

export const createApiUrl = (
  baseUrl: string,
  paramsList: { name: string; value?: string | number | null }[]
) => {
  // 새로운 URLSearchParams 객체 생성
  const params = new URLSearchParams();

  // 매개변수로 받은 paramsList를 순회하면서 value 값이 유효한 경우 name=value 형태로 추가
  paramsList.forEach(({ name, value }) => {
    if (value) {
      params.set(name, `${value}`);
    } else {
      // value 값이 없을 경우 쿼리 스트링에서 키 삭제
      params.delete(name);
    }
  });

  // baseUrl에 쿼리 스트링을 추가하여 반환
  return `${baseUrl}?${params.toString()}`;
};

• search.tsx

// 활용하기
const closeSearch = () => {
  // 뒤로 가기
  // history.back() 은 예상치 못한 동작을 야기할 수 있어 지양 !
  router.back();
};

useEffect(() => {
  // 현재 URL의 쿼리 스트링을 가져와 새로운 URLSearchParams 객체 반환
  const currentQuery = new URLSearchParams(window.location.search);
  // 'detail' 페이지는 검색이 안되므로 'origin' 삭제
  // originPath state의 기본값을 'map'으로 설정해 다른 사이트에서 URL로 접근하거나
  // detail 페이지에서 접근 시 바로 'map' 페이지에서 검색할 수 있도록 설정했다.
  const origin = currentQuery.get('origin');
  if (origin && origin !== 'detail') {
    setOriginPath(origin);
  }
  currentQuery.delete('origin');

  const updatedQuery = currentQuery.toString();
  setQuery(updatedQuery);
}, [updateRegion]);

// 선택된 버튼이 있을 경우, 쿼리가 생성 -> 검색 페이지 이전의 페이지에서 쿼리를 가지고 검색한다.
// 쿼리가 없을 경우 기존 페이지로 돌아가도록 구현
const handleSearch = async () => {
  try {
    router.push(`/${originPath}?${query || ''}`);
  } catch (error) {
    console.error(error);
  }
};

🚀 리팩토링 결과: UX 개선

• 새로 고침 시 검색어 유지
• 뒤로 가기 / 앞으로 가기 검색 유지
• 검색 결과 URL로 공유 가능
• 외부 페이지에서 URL로 접근 시에도 에러 없이 작동 가능 !