좋아요 순서

• useState에 좋아요 초기값 넣어주기

//처음 초기값을 product.wishCheck을 통해서 받았다..!
 const [wishCheck, setwishcheck] = useState(product.wishCheck);

• useEffect를 통해 처음 렌더링할 때 보여주기

 useEffect(() => {     // 상품 정보 axios
    axios
 .get(`https://i8c110.p.ssafy.io/api/v1/product/${productId}?userCode=2`)
      .then((res) => {
        setProduct(res.data);
        setwishCnt(res.data.wishSize);
        setwishcheck(res.data.wishCheck);
        setliveReqSize(res.data.liveReqSize);
        console.log(res.data, "🎇");
        setproductImgs(res.data.imgUrlList);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

• 좋아요를 클릭하면 post 요청 보내주기

//좋아요를 클릭하면
   <div className={styles.icon} onClick={addwish}>
// post 요청하기
const addwish = () => {
    //wishcheck가 true라면 post 요청
    if (wishCheck === false) {
      axios
        .post(`https://i8c110.p.ssafy.io/api/v1/wish?userCode=2&productId=${productId}`)
        .then((res) => {
          console.log(res, "🎉");
          console.log(res.data.wishCheck, "🎈");
          setwishcheck(res.data.wishCheck);
          console.log(res.data.wishCnt, "🎆");
          setwishCnt(res.data.wishCnt);
        })
        .catch((err) => {
          console.log(err);
        });
    }    

• useState를 통해서 하트 업데이트 시켜주기

useState의 가장 큰 장점은 새로고침 하지 않아도 동적으로 최신 상태로 업데이트 시켜준다는 것이다..!
이 사실을 몰라서 useEffect 두번째 인자로 계속 넣고 있었다...

• 취소도 똑같다. 취소는 wishCheck 상태가 이미 true이면 그때 취소 post를 하고, 상태가 false면 좋아요를 누를 수 있도록 만들어 주면 끗..!

• 좋아요 수도 좋아요 수를 useState에 담아주고,,

const [wishCnt, setwishCnt] = useState(product.wishSize);

• 처음 렌더링 할 때 업데이트 시켜주고

  useEffect(() => {     // 상품 정보 axios
    axios
      .get(`https://i8c110.p.ssafy.io/api/v1/product/${productId}?userCode=2`)
      .then((res) => {
        setProduct(res.data);
        setwishCnt(res.data.wishSize);
        setwishcheck(res.data.wishCheck);
        setliveReqSize(res.data.liveReqSize);
        console.log(res.data, "🎇");
        setproductImgs(res.data.imgUrlList);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

• 좋아요를 클릭할 때마다 좋아요 수를 업데이틑 해주면 된다.

  const addwish = () => {
    //wishcheck가 true라면 post 요청
    if (wishCheck === false) {
      axios
        .post(`https://i8c110.p.ssafy.io/api/v1/wish?userCode=2&productId=${productId}`)
        .then((res) => {
          console.log(res, "🎉");
          console.log(res.data.wishCheck, "🎈");
          setwishcheck(res.data.wishCheck);
          console.log(res.data.wishCnt, "🎆");
          setwishCnt(res.data.wishCnt);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    //wishcheck가 true라면 delete요청
    else {
      axios
        .delete(`https://i8c110.p.ssafy.io/api/v1/wish?userCode=2&productId=${productId}`)
        .then((res) => {
          console.log(res, "🎃");
          setwishcheck(res.data.wishCheck);
          setwishCnt(res.data.wishCnt);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };