searchParams 질문있습니다.

Question

const onClickHot = () => { setCurrent('hot'); router.replace(`/search?q=${searchParams.get('q')}`) }     이 코드가 있으면 q=null일때 주소가 http://localhost:3000/search?q=null 이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠? null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ

제로초(조현영) · Answer

제 코드는 다음과 같습니다. const searchParams = useSearchParams(); const onClickHot = () => { setCurrent('hot'); const newSearchParams = new URLSearchParams(searchParams); newSearchParams.delete('f'); router.replace(`/search?${newSearchParams.toString()}`); } const onClickNew = () => { setCurrent('new'); const newSearchParams = new URLSearchParams(searchParams); newSearchParams.set('f', 'live'); router.replace(`/search?${newSearchParams.toString()}`); }

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. ChangJun.dev님 질문 주셔서 감사합니다. 제로초님의 강의에서 null 이 주소창의 쿼리로 나타나지 않는 이유는, searchParams.get('q') 가 null 인 경우를 체크하여 조건문을 통해 쿼리스트링을 분기 처리하는 방식 때문일 수 있습니다. 아래는 이와 같은 상황을 처리할 수 있는 방법의 예시입니다. const onClickHot = () => { const query = searchParams.get('q'); const url = query ? `/search?q=${query}` : '/search'; router.replace(url); } 위 코드에서는 searchParams.get('q') 의 값이 null 인지 확인하고, 만약 null 인 경우에는 기본 검색 페이지로 이동하도록 설정합니다. 관련된 예제를 확인하시려면 다음의 질문과 답변 링크가 도움이 될 수 있습니다: - Next.js에서 query가 존재하지 않을 때의 주소 처리를 어떻게 해야 할까요? - Query 스트링에서 null 제거 하는 방법이 있을까요? 이를 통해 null 값을 처리하는 방법을 더 잘 이해하실 수 있을 것입니다. 제로초님의 강의에서 발생한 코드와의 차이점을 이해하는 데 도움이 되시길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.