searchParams 질문있습니다.

Next + React Query로 SNS 서비스 만들기

useSearchParams와 프로필, /search 페이지

작성

수정됨

  const onClickHot = () => {
    setCurrent('hot');
    router.replace(`/search?q=${searchParams.get('q')}`)
  }

이 코드가 있으면 q=null일때 주소가
http://localhost:3000/search?q=null

이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠?

null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ

react next.js react-query next-auth msw

답변 2

제로초(조현영)

지식공유자

제 코드는 다음과 같습니다.

  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 인턴

안녕하세요, 인프런 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 값을 처리하는 방법을 더 잘 이해하실 수 있을 것입니다. 제로초님의 강의에서 발생한 코드와의 차이점을 이해하는 데 도움이 되시길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

searchParams 질문있습니다.