새로 고침해도 상태 유지하기

// 좋아요 하트 버튼 클릭 이벤트
  const onHandleClickLike = (e) => {
    e.preventDefault();

    if(!wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]) {
      console.log('1');
      dispatch(AddToWishlistAction(item, quantityCount, option));
      setColor("#ff0000");
    } else {
      console.log('2');
      dispatch(DeleteFromWishlistAction(item));
      setColor("#ffffff");
    }
    return;
  };

하트 모양 좋아요 버튼을 클릭하면 wishlist에 담기고 빨간색으로 버튼 색이 바뀌고 그걸 유지하는 것이 목적이었다. 처음에 어떻게 해야할지 떠오르지 않아서 구글링을 해봤는데 상태를 localStorage에 저장하여 유지하는 방법이 있었다. 그래서 localStorage에 저장을 하려고 해봤는데 잘 되지 않았다. 이걸로 하루 반나절은 잡아먹은 것 같다. 하지만 해결방법은 생각보다 매우 간단했다. 그냥 useEffect를 사용하면 되는 것이었다.

• 해결방법

// 좋아요 하트 버튼 클릭 이벤트
  const onHandleClickLike = (e) => {
    e.preventDefault();

    if(!wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]) {
      dispatch(AddToWishlistAction(item, quantityCount, option));
      setColor("#ff0000");
    } else {
      console.log('2');
      dispatch(DeleteFromWishlistAction(item));
      setColor("#ffffff");
    }
    return;
  };

// wishlist에 담겨있으면 빨간색 버튼 유지
  useEffect(() => {
    if(wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]) {
      setColor("#ff0000");
    }
  }, []);

useEffect를 사용하여 조건으로 wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]를 사용하였는데 이 뜻은 wishlist에 상품이 있다는 뜻이기 때문에 color를 빨간색으로 변경해준다. 이렇게 하면 새로고침이나 뒤로가기를 하여도 상태가 유지된다.

<반대로>
좋아요 취소하면 wishlist 삭제 해결 방법

// 좋아요 하트 버튼 클릭 이벤트
  const onHandleClickLike = (e) => {
    e.preventDefault();

    if(!wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]) {
      dispatch(AddToWishlistAction(item, quantityCount, option));
      setColor("#ff0000");
    } else {
      dispatch(DeleteFromWishlistAction(item));
      setColor("#ffffff");
    }
    return;

원래는 DeleteFromWishlistAction(item)으로 item을 삭제하려 했었는데 어리석은 짓이었다. wishlist에 들어있는 item을 삭제해야 하므로 wishlistList.wishlistItems[0]을 delete해줘야한다.

• 해결방법

// 좋아요 하트 버튼 클릭 이벤트
  const onHandleClickLike = (e) => {
    e.preventDefault();

    if(!wishlistList.wishlistItems.filter(InwishlistItem => InwishlistItem.id === item.id)[0]) {
      dispatch(AddToWishlistAction(item, quantityCount, option));
      setColor("#ff0000");
    } else {
      dispatch(DeleteFromWishlistAction(wishlistList.wishlistItems[0]));
      setColor("#ffffff");
    }
    return;