URL 파라미터 쉽게 수정하는 법

개발을 하다보면 URL에 쿼리를 추가 또는 삭제해야 하는 일이 자주 생긴다.
팀에서 자체적으로 만든 함수가 있어 나름대로 편리했지만 더욱 편한 방법을 알게 되어 글로 써본다!

1.ㅤURL에 파라미터를 추가하는 방법

useRouter를 사용한다.

const router = useRouter()
router.파라미터명 = 값
router(router)

router.파라미터명 = 값
이렇게 하면 router에 알아서 파라미터를 넣어주고 router(router)로 다시 URL을 세팅해주는 것이다.

2.ㅤURL에서 파라미터 삭제하기

queryString 라이브러리를 사용한다.

const router = useRouter()

if(typeof window === "undefined") return;
const origin = window.location;
router.push(queryString.exlude(origin.href, ["삭제하고 싶은 파라미터명"]));

우선 typescript 기준 window의 객체를 체크해줘야한다.
객체가 undefined라면 return해주고
아니라면 window로부터 location 객체를 받아온다.
queryString.exlude는

queryString.exlude(full URL, ["파라미터명1","파라미터명2"])

다음과 같은 방식으로 사용한다. location.href가 full URL을 가지고 있기 때문에 window 객체를 활용하였다. 쿼리 스트링에 유저의 정보가 담겨 있느냐 없느냐에 따라 모달창이나 사이트탭을 열고 닫는 경우에 유용했다.