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

search 페이지의 Tab 컴포넌트에서 질문이 있습니다.

searchParams에 hot과 new가 전달되는 부분이 어딘지 모르겠어서 질문드립니다..
제 생각으로는 Tab 컴포넌트에서 인기, 최신 div를 클릭해서 값을 전달해야 할 것 같은데
해당 부분에서는 current useState만 변경하고 다른 변경은 없는 것 같습니다.
어느 부분에서 searchParams에 값을 전달해서, searchParams.get('q')로 값을 받아올수있는지 궁금합니다..

아래 코드 첨부드립니다!

"use client";

import style from "../search.module.css";
import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
export default function Tab() {
  const [current, setCurrent] = useState("hot");
  const router = useRouter();
  const searchParams = useSearchParams();
  const onClickHot = () => {
    setCurrent("hot");
    router.replace(`/search?q=${searchParams.get("q")}`);
  };

const onClickNew = () => {
    setCurrent("new");
    router.replace(`/search?${searchParams.toString()}&f=live`);
  };

  return (
    <div className={style.homeFixed}>
      <div className={style.homeTab}>
        <div onClick={onClickHot}>
          인기
          <div className={style.tabIndicator} hidden={current === "new"}></div>
        </div>
        <div onClick={onClickNew}>
          최신
          <div className={style.tabIndicator} hidden={current === "hot"}></div>
        </div>
      </div>
    </div>
  );
}