구독,구독취소에 대해 질문이 있어요

안녕하세요 ... 구독, 구독취소 잘 적용이되는데 페이지 새로고침만하면 왜 버튼이 다시 구독전으로 돌아갈까요...

db확인해보니 구독할때마다 계속 구독정보가 저장되더라구요

_id값만 다르게 계속 중복저장돼서 그런가싶기도하고

뭐가 문제인지 모르겟네요 ㅠㅠ

const express = require("express");
const router = express.Router();
const { Subscriber } = require("../models/Subscriber");

//=================================
//             Subscriber
//=================================

router.post("/subscriberNumber", (req, res) => {
  Subscriber.find({ userTo: req.body.userTo })
    .exec((err, subscriber) => {
      if (err) return res.status(400).send(err);
      return res
        .status(200)
        .json({ success: true, subscriberNumber: subscriber.length });
    });
});

router.post("/subscribed", (req, res) => {
  Subscriber.find({ userTo: req.body.userTo, userFrom: req.body.userFrom })
    .exec((err, subscriber) => {
      if (err) return res.status(400).send(err);

      let result = false;

      if (subscriber.length !== 0) {
        result = true;
      }

      res.status(200).json({ success: true, subscribed: result });
    });
});

router.post("/unSubscribe", (req, res) => {
  Subscriber.findOneAndDelete({
    userTo: req.body.userTo,
    userFrom: req.body.userFrom,
  }).exec((err, doc) => {
    if (err) return res.status(400).json({ success: false, err });
    res.status(200).json({ success: true, doc });
  });
});

router.post("/subscribe", (req, res) => {
  const subscriber = new Subscriber(req.body);
  subscriber.save((err, doc) => {
    if (err) return res.status(400).json({ success: false, err });
    res.status(200).json({ success: true, doc });
  });
});

module.exports = router;

import React, { useEffect, useState } from "react";
import Axios from "axios";

function Subscribe(props) {
  const [SubscriberNumber, setSubscriberNumber] = useState(0);
  const [Subscribed, setSubscribed] = useState(false);

  useEffect(() => {
    let variables = { userTo: props.userTo };

    Axios.post("/api/subscribe/subscriberNumber", variables).then(
      (response) => {
        if (response.data.success) {
          setSubscriberNumber(response.data.subscriberNumber);
        } else {
          alert("구독자수를 확인하는데 실패했습니다.");
        }
      }
    );

    let subscribedVariables = {
      userTo: props.userTo,
      userFrom: localStorage.getItem("userId"),
    };

    Axios.post("/api/subscribe/subscribed", subscribedVariables).then(
      (response) => {
        if (response.data.success) {
          setSubscribed(response.data.subscribed);
        } else {
          alert("구독했는지 확인하지 못했습니다.");
        }
      }
    );
  }, []);

  const onSubscribe = () => {
    let subscribeVariables = {
      userTo: props.userTo,
      userFrom: props.userFrom,
    };

    if (Subscribed) {
      Axios.post("/api/subscribe/unSubscribe", subscribeVariables).then(
        (response) => {
          if (response.data.success) {
            setSubscribed(!Subscribed);
            setSubscriberNumber(SubscriberNumber - 1);
          } else {
            alert("구독취소를 실패했습니다.");
          }
        }
      );
    } else {
      Axios.post("/api/subscribe/subscribe", subscribeVariables).then(
        (response) => {
          if (response.data.success) {
            setSubscribed(!Subscribed);
            setSubscriberNumber(SubscriberNumber + 1);
          } else {
            alert("구독을 실패했습니다.");
          }
        }
      );
    }
  };

  return (
    <div
      style={{
        backgroundColor: `${Subscribed ? "#AAAAAA" : "#CC0000"}`,
        borderRadius: "4px",
        color: "white",
        padding: "10px 16px",
        fontWeight: "500",
        fontSize: "1rem",
        textTransform: "uppercase",
      }}
      onClick={onSubscribe}
    >
      {Subscribed ? "Subscribed" : `${SubscriberNumber}  Subscribe`}
    </div>
  );
}

export default Subscribe;

인프런 커뮤니티 질문&답변