React-Youtube : 구독 기능 UI 및 구현

유튜브에서 구독하는 기능을 만들어 보려고 한다.

---

Subscriber Model 만들기

다음 링크에서 확인하기

 

Subscribe Button UI 만들기

// client > src > components > views > VideoDetailPage > VideoDetailPage.js
// 중략
import Subscribe from "./Sections/Subscribe";
function VideoDetailPage(props) {
  // 중략
  if (VideoDetail.writer) {
    return (
      // 중략
            <List.Item actions={[<Subscribe />]}>
              <List.Item.Meta />
            </List.Item>
            //중략
    )
  } else {
    return <div>...Loading</div>;
  }  
}

export default VideoDetailPage;

UI 디자인 및 코드를 작성하기엔 너무 길기 때문에 Subscribe라는 컴포넌트를 하나 더 생성을 해준다. 생성을 하기 전에 먼저 import를 한 후 해당하는 위치에 actions값에 넣어준다. 왜 대괄호에 넣어주는지는 모르겠지만 ant design에도 명시가 되어있다.

 

Subscribe.js를 아래의 주석과 같은 위치에 만든 후 다음과 같은 코드를 작성한다.

// client > src > components > views > VideoDetailPage > Sections > Subscribe.js

import React from "react";

function Subscribe() {
  return (
    <div>
      <button
        style={{
          backgroundColor: "#cc0000",
          borderRadius: "4px",
          color: "white",
          padding: "10px 16px",
          fontWeight: "500",
          fontSize: "1rem",
          textTransform: "uppercase", // 대문자 전환
        }}
      >
        Subscribe
      </button>
    </div>
  );
}

export default Subscribe;

이렇게 할 경우 일부 디자인이 변경되는 것을 확인할 수 있다.

 

다음으로는 구독자수를 axios를 통해 가져오려고 한다.

// client > src > components > views > VideoDetailPage > Sections > Subscribe.js

import React from "react";
import Axios from "axios";

function Subscribe(props) {
  useEffect(() => {
    let variable = { userTo: props.userTo };
    Axios.post("/api/subscribe/subscribeNumber", variable).then((response) => {
      if (response.data.success) {
      } else {
        alert("구독자 수 정보를 받아오지 못했습니다.");
      }
    });
  }, []);
  return (
    <div>
      <!-- 중략 -->
    </div>
  );
}

export default Subscribe;

먼저 상단에서 만든 Subscribe태그에 다음과 같은 옵션을 추가해준다.

<List.Item actions={[<Subscribe userTo={VideoDetail.writer._id} />]} >

Subscribe에 userTo를 props를 하게 되면 Subscribe.js에서 props를 통해 가져올 수 있다고 한다. 

 

나를 구독한 인원수

다음 링크에서 확인하기

다음과 같은 링크에서 똑같은 제목을 찾아 진행을 하면 된다.

 

구독자 정보 가져오기

// client > src > components > views > VideoDetailPage > Sections > Subscribe.js

import React from "react";

function Subscribe(props) {
  const [SubscribeNumber, setSubscribeNumber] = useState();
  useEffect(() => {
    let variable = { userTo: props.userTo };
    Axios.post("/api/subscribe/subscribeNumber", variable).then((response) => {
      if (response.data.success) {
        setSubscribeNumber(response.data.SubscribeNumber);
      } else {
        alert("구독자 수 정보를 받아오지 못했습니다.");
      }
    });
  }, []);
  return (
    <div>
      <!-- 중략 -->
    </div>
  );
}

export default Subscribe;

여기서는 위에서 만든 라우터를 이용하여 SubscribeNumber값을 useState를 사용하여 가져오게 만든다.

 

나를 구독한 Subscribe.js에서 props를 통해 가져올 수 있다고 한다. 

 

 

 

내가 구독한 사람인지 확인하기

다음 링크에서 확인하기

다음과 같은 링크에서 똑같은 제목을 찾아 진행을 하면 된다.

 

onClick Event 적용하기

다음으로는 내가 subscribe를 클릭하였을 때의 이벤트를 적용해보려고 한다.

// client > src > components > views > VideoDetailPage > VideoDetailPage.js
// 중략
import Subscribe from "./Sections/Subscribe";
function VideoDetailPage(props) {
  // 중략
  if (VideoDetail.writer) {
    return (
      // 중략
            <List.Item
              actions={[
                <Subscribe
                  userTo={VideoDetail.writer._id}
                  userFrom={localStorage.getItem("userId")}
                />,
              ]}
            >
              <List.Item.Meta />
            </List.Item>
            //중략
    )
  } else {
    return <div>...Loading</div>;
  }  
}

export default VideoDetailPage;

이전에 우리는 userId값을 localStorage에 넣은 적이 있다. LoginPage.js에서 이미 로그인을 하였을 때 userId값을 localStorage에 저장을 하도록 되어있기에 userFrom은 다음과 같이 userId를 가져오게 하였다.

Application에서 Local Storage 값에 확인하기

위 사진과 같이 'F12'혹은 '우클릭 -> 검사'를 누르게 되면 다음과 같은 화면이 나오는데 거기에서 Application을 클릭한 후 Storage에서 Local Storage를 누른 후 현재 내가 연 리액트 링크를 클릭하면 다음과 같은 Key, Value값이 나온다.

 

구독이거나 혹은 구독이 아니거나

다음으로는 구독중일 때와 구독 중이 아닐 때를 onClick기능과 axios를 활용하여 구현을 하려고 한다. 해당하는 노드 서버 관련 내용은 제목과 동일한 문서로 이 곳에서 검색하시면 됩니다.

// client > src > components > views > VideoDetailPage > Sections > Subscribe.js

import React from "react";

function Subscribe(props) {
// 중략
  const onSubscribe = () => {
    let subscribedVariable = {
      userTo: props.userTo,
      userFrom: props.userFrom,
    };
    // 이미 구독중이라면, 구독 취소가 됨
    if (Subscribed) {
      Axios.post("/api/subscribe/unSubscribe", subscribedVariable).then(
        (response) => {
          if (response.data.success) {
            setSubscribeNumber(SubscribeNumber - 1);
            setSubscribed(!Subscribed);
          } else {
            alert("구독 취소하는데 실패하였습니다.");
          }
        }
      );
      // 아직 구독중이 아니라면
    } else {
      Axios.post("/api/subscribe/subscribe", subscribedVariable).then(
        (response) => {
          if (response.data.success) {
            setSubscribeNumber(SubscribeNumber + 1);
            setSubscribed(!Subscribed);
          } else {
            alert("구독 하는데 실패하였습니다.");
          }
        }
      );
    }
  };
  return (
    <div>
      <button
        style={{
          backgroundColor: `${Subscribe ? "#CC0000" : "#AAAAAA"}`,
          borderRadius: "4px",
          color: "white",
          padding: "10px 16px",
          fontWeight: "500",
          fontSize: "1rem",
          textTransform: "uppercase", // 대문자 전환
        }}
        onClick={onSubscribe}
      >
        {SubscribeNumber} {Subscribed ? "Subscribed" : "subscribe"}
      </button>
    </div>
  );
}

export default Subscribe;

먼저 <button>에 onClick이벤트를 넣는다. 그리고 onSubscribe에 구독중인지, 구독 중이 아닌지에 대한 axios를 만든다. 그리고 구독 중이라면 클릭하였을 때 구독 취소가 되므로 숫자가 한 개씩 줄어들기에 SubscribeNumber값에 -1을 한 것이고, subscribed값이 반대로 적용을 시킨다.

마찬가지로 구독중이 아니라면 구독으로 변경이 되는 것이기에 SubscribeNumber값은 +1이 되고, subscribed값은 현재 값에서 반대로 적용시키는 것을 동일하다.

 

 

 

오늘은 이렇게 구독에 관련된 코드를 정리해보았다.

알고 있어도 막상 현실에서 하는 것과는 차원이 달랐다.

또다시 나만의 개인 프로젝트를 만들다 보면 헷갈리던 부분과 어설프게 기억하는 코드에 대해 좀 더 명확해질 것 같다.

 

오늘의 코드 바로가기