<React> 쿼리로 fetch 받아오기

팀프로젝트를 하면서 가장 어렵게 느껴지는 부분이 fetch 받아오는 방법이다
저번 클론에서 useSearchparams를 사용해서 fetch 받아왔는데 이번에는 axios의 params를 사용해서 받아왔다

navigate와 useSearchparams

function Today() {
  const [recommend, setRecommend] = useState([]);
  const [query, setQuery] = useSearchParams('');
  const limitNum = 6;
  let limit = query.get('limit');
  let btn = query.get('categoryName');

  const getCategory = () => {
    axios
      .get(`http://localhost:3004/books?categoryName=${btn}&limit=${limit}`)
      .then(res => {
        setRecommend(res.data);
      })
      .catch(() => '로딩실패');
    query.set('limit', limitNum);
    // setQuery(query);
  };

  useEffect(() => {
    getCategory();
  }, [limit, btn]);

  const navigate = useNavigate();
  const bookType = btn => {
    navigate(`/Home?categoryName=${btn}`);
  };
  
 return(
  <div>
    {bookCategory.map(btn=>(
    <button onClick={()=>bookType(btn)}> 
        {btn}
      </button>
    ))}
  </div>
  )

 
}

코드 리팩토링

function Today() {
  const [recommend, setRecommend] = useState([]);

  const getCategory = categoryName => {
    let limit = 6;
    axios
      .get(`http://localhost:8000/books`, {
        params: {
          categoryName: categoryName,
          limit: limit,
        },
      })
      .then(res => {
        setRecommend(res.data);
      })
      .catch(() => '로딩실패');
  };

  useEffect(() => {
    getCategory(bookCategory[0]); //렌더링될때  bookCategory[0]가 바로 보일 수 있도록 한다
  }, [recommend]);

  return(
     <div>
       {bookCategory.map(btn => (
       <button key={btn} onClick={() =>getCategory(btn)}>
                {btn}
              </button> ))}
    </div>)}