MHLab blog

Light

React에서 Query param 지우기 (With React Hook)

Posted by @MHLab, January 19, 2023
ReactJS
Series ofReactJS

thumbnail

React에서...

이번에 프리온보딩을 하면서 과제를 하다가 페이징 이동을 하고 쿼리를 지워줘야 할 로직이 필요했다.

/user/main?code=logout

예를 들면 위와 같이 url 파라메터가 왔을 때 뒤의 code... 부터 지워서 사용자에게 안보이게 해주고 싶었다.
결과는 이렇게?

/user/main

Next.Js에서는 전에 짜둔 코드가 있었는데, React 에서는 해당 방법을 사용할 수 없었다.

당연한게 Next.Js에서는 Link라는 훌륭한 것이 있지만, React에는 없다.
그래서 직접 찾아서 구현해야 했다.

어떻게?

그냥 커스텀 훅을 만들어서 썼다.

import { useEffect } from "react"
import { useSearchParams } from "react-router-dom"

interface UseQueryRemoverProps {
  query: string
  excuteFunc?: Function
}

export default function useQueryRemover({
  query,
  excuteFunc,
}: UseQueryRemoverProps) {
  const [searchParam, setSearchParam] = useSearchParams()
  useEffect(() => {
    if (searchParam.has(query)) {
      searchParam.delete(query)
      setSearchParam(searchParam)
      if (excuteFunc) {
        excuteFunc()
      }
    }
  }, [])
}

파라메터로 지울 쿼리를 받고, 지운 뒤 실행함수를 옵셔널로 전달받는다.
다음과 같이 사용 한다.

export default function LoginSignUpPage() {
    const [viewMode, setViewMode] = useState<AuthViewMode>(
        AUTH_VIEW_MODE.LOGIN,
    );

    //쿼리를 지워준다.
    useQueryRemover({
        query: "code",
        excuteFunc: () => {
            Swal.fire({
                title: "로그아웃",
                html: "로그아웃 되었습니다.",
                icon: "success",
                confirmButtonText: "확인",
            });
        },
    });

    return (...)
}

물론 이 Hook도 개선할 점이 있다.
만약 지울 파라메터가 여러개 일 경우에 대해 처리는 되어 있지 않다... (-_-;;)

이 부분은 Hook의 전달인자 중 query부분을 string이 아니라 string[] 로 받은 다음,
이를 순회하며 하나씩 지우는 로직으로 바꾸면 될듯 하다...(맞겠지?)

무튼 시간이 없어서 여기까지 로직을 작성하고 마무리 했다.


정리

시간이 되면 Next.JS에서 처리하는 법과, 이 코드도 개선하여 재 포스팅을 할 예정이다.
이 로직은 StackOverflow를 참고하였다.