22/08/13 [모각코] 8일차

이제는 filterbox에서 필터링 기능이 가능하다.

아직 백엔드와 연결하지는 못했지만 댓글 화면 구현

 

백엔드와 연결해 랜덤페이지에서 랜덤한 맥주를 추천해준다.

useEffect를 통해 비동기함수를 다룰수 있다.

const result = filteredCollected();
  console.log(result);
  const getBeerList = async (e) => {
    console.log("GetBeerList Called");
    const request_data = { beerTypeList: result }; // type of -> Object
    let response = await axios({
      method: "post",
      url: "/api/filter",
      headers: { "Content-Type": "application/json" },
      data: JSON.stringify(request_data),
    });
    console.log("response: ", response);
    setBeerData(response.data.data);
    // response.data
    // [{ }, { }, { } ...] -> props로 전달필요
  };

  useEffect(() => {
    console.log("Enter UseEffect");
    getBeerList();
  }, [filterState]);

filterState가 변경될때 getBeerList를 실행하게 해서 변경된 filterState값이 getBeerList함수를 통해 beerData를 업데이트 할 수 있게 한다.