React에서 Query param 지우기 (With React Hook)
January 19, 2023
React에서…
이번에 프리온보딩을 하면서 과제를 하다가 페이징 이동을 하고 쿼리를 지워줘야 할 로직이 필요했다.
/user/main?code=logout예를 들면 위와 같이 url 파라메터가 왔을 때 뒤의 code… 부터 지워서 사용자에게 안보이게 해주고 싶었다.
결과는 이렇게?
/user/mainNext.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를 참고하였다.
