useEffect를 사용하여 배경색 상태를 유지하는 팁

Question

사용자가 페이지를 이동할 때 버튼 색상이 "검은색"으로 유지되어 항목을 위시리스트에 저장했음을 사용자에게 표시할 수 있도록 위시리스트 토글 버튼의 ​​배경색을 저장하려고 합니다.

const Item = (props) =>
  const 디스패치 = useDispatch();
  const [배경, setBackground] = useState(false);

  함수 addToCartHandler(제품) {
    파견(addToCart(제품));
  }

  함수 토글WishlistHandler(제품) {
    파견(toggleItem(제품));
    setBackground((현재) => !current);
  }

  반품 (
    <div>
      <li className={classes.item}>
        <img src={props.img} alt="항목" className={classes.image} />
        <div className={classes.description}>
          <p className={classes.title}>{props.title}</p>
          <p className={classes.price}>£{props.price}.00</p>
        </div>
        <div className={classes.actions}>
          <div
            className={`${classes.addWishlist} ${classes.icon}`}
            onClick={() =>toggleWishlistHandler(props.product)}
            스타일={{
              backgroundColor: 배경 ? "검은색" : "주황색",
            }}
          >
            <i className="fa-solid fa-heart"></i>
          </div>
          <div
            className={`${classes.addCart} ${classes.icon}`}
            onClick={() => addToCartHandler(props.product)}
          >
            <i className="fa-solid fa-bag-shopping"></i>
          </div>
        </div>
      </li>
    </div>
  );
};

기본 항목 내보내기;

Answer 1

로컬 저장소에 색상을 저장할 수 있습니다.

으아악