[React] 구독하기(팔로워, 팔로우) 기능

아래와 같이 구독을 안 했을 때와 구독을 했을 때 구현을 해보겠다.

✅ 상태관리

구독자 수와 구독 여부 상태를 만들어준다.

  const [SubscribeNumber, setSubscribeNumber] = useState(0);
  const [Subscribed, setSubscribed] = useState(false);

 

✅ 첫 렌더링

페이지를 처음으로 렌더링 할 때, useEffect를 활용하여 서버에서 구독자 수 정보와 구독 여부 정보를 가져온다.

먼저, 구독자 수 정보를 가져오기 위해선 구독받은 사람 정보를 서버에 보내줘야 한다. 응답이 성공이라면 상태를 업데이트해준다. 다음으로 구독 여부 정보를 가져오기 위해선 구독받은 사람과 구독자, 두 개의 정보를 서버에 보내줘야 한다. 이때 구독자 정보를 꺼내오기 위해서 Application -> localStorage를 확인해보면 userId 정보가 있을 것이다. 이것은 내가 로그인한 정보이기 때문에, 구독 여부를 확인해볼 수 있다.

  useEffect(() => {
    // 구독자 수 정보 가져오기
    const variable = { userTo: props.userTo };
    axios.post("/api/subscribe/subscribeNumber", variable).then((res) => {
      if (res.data.success) {
        setSubscribeNumber(res.data.subscribeNumber);
      } else {
        alert("구독자 수 정보를 받아오지 못했습니다.");
      }
    });

    // 구독 여부 정보 가져오기
    const subscribedVariable = {
      userTo: props.userTo,
      userFrom: localStorage.getItem("userId"),
    };
    axios.post("/api/subscribe/subscribed", subscribedVariable).then((res) => {
      if (res.data.success) {
        console.log(res.data);
        setSubscribed(res.data.subscribed);
      } else {
        alert("정보를 받아오지 못했습니다.");
      }
    });
  }, []);

 

✅ 버튼 클릭 이벤트

다음으로 이제 버튼을 클릭했을 때 변하는 것을 해보겠다!

구독 버튼 클릭시 이미 구독 중일 수도 있고, 아직 구독 중이 아닐 수도 있다.

만약 구독 중(회색)이라면 구독을 취소(빨간색)하게 될 것이다. 구독 취소가 성공적이라면 구독자 수 상태에서 1을 빼주고, 구독 여부를 반대로 업데이트해준다.

만약 구독 중이 아니라면(빨간색) 구독(회색)을 해야 할 것이다. 구독이 성공적이라면 구독자 수 상태에서 1을 더해주고, 구독 여부를 반대로 업데이트해준다.

  // 구독 버튼 클릭 시
  const handleSubscribe = () => {
    const subscribedVariable = {
      userTo: props.userTo,
      userFrom: props.userFrom,
    };
    // 이미 구독 중이라면
    if (Subscribed) {
      axios
        .post("/api/subscribe/unSubscribe", subscribedVariable)
        .then((res) => {
          if (res.data.success) {
            setSubscribeNumber(SubscribeNumber - 1);
            setSubscribed(!Subscribed);
          } else {
            alert("구독 취소 실패");
          }
        });
    } // 아직 구독 중이 아니라면
    else {
      axios.post("/api/subscribe/subscribe", subscribedVariable).then((res) => {
        if (res.data.success) {
          setSubscribeNumber(SubscribeNumber + 1);
          setSubscribed(!Subscribed);
        } else {
          alert("구독 실패");
        }
      });
    }
  };

 

✅ 전체 코드

// Subscribe.js

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

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

  useEffect(() => {
    // 구독자 수 정보 가져오기
    const variable = { userTo: props.userTo };
    axios.post("/api/subscribe/subscribeNumber", variable).then((res) => {
      if (res.data.success) {
        setSubscribeNumber(res.data.subscribeNumber);
      } else {
        alert("구독자 수 정보를 받아오지 못했습니다.");
      }
    });

    // 구독 여부 정보 가져오기
    const subscribedVariable = {
      userTo: props.userTo,
      userFrom: localStorage.getItem("userId"),
    };
    axios.post("/api/subscribe/subscribed", subscribedVariable).then((res) => {
      if (res.data.success) {
        console.log(res.data);
        setSubscribed(res.data.subscribed);
      } else {
        alert("정보를 받아오지 못했습니다.");
      }
    });
  }, []);

  // 구독 버튼 클릭 시
  const handleSubscribe = () => {
    const subscribedVariable = {
      userTo: props.userTo,
      userFrom: props.userFrom,
    };
    // 이미 구독 중이라면
    if (Subscribed) {
      axios
        .post("/api/subscribe/unSubscribe", subscribedVariable)
        .then((res) => {
          if (res.data.success) {
            setSubscribeNumber(SubscribeNumber - 1);
            setSubscribed(!Subscribed);
          } else {
            alert("구독 취소 실패");
          }
        });
    } // 아직 구독 중이 아니라면
    else {
      axios.post("/api/subscribe/subscribe", subscribedVariable).then((res) => {
        if (res.data.success) {
          setSubscribeNumber(SubscribeNumber + 1);
          setSubscribed(!Subscribed);
        } else {
          alert("구독 실패");
        }
      });
    }
  };

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

export default Subscribe;