VideoDetailPage에서 Subscribe관련 질문

아마 이게 proxy를 쓰다보니깐 통신이 느려서 그 Subscribe가 Subscribed로 될때 보여지는게 더 클거에요

제가 proxy를 쓰지 않고 했으면 더 이런 이슈가 덜있었을것 같다고 생각합니다 ~

그리고 이런것을 더 없애시고 싶다면 서버사이드렌더링을 하시면 됩니다 ~

그래도 이상황에서도 어느정도 구현을 해보면

아래 처럼 구현할수 있습니다 ~

import React, { useEffect, useState } from 'react'
import axios from 'axios';
function Subscriber(props) {
const userTo = props.userTo
const userFrom = props.userFrom

const [SubscribeNumber, setSubscribeNumber] = useState(0)
const [Subscribed, setSubscribed] = useState(false)
const [Loading, setLoading] = useState(true)

const onSubscribe = () => {

let subscribeVariables = {
userTo: userTo,
userFrom: userFrom
}

if (Subscribed) {
 // 이미 구독 중 일때
axios.post('/api/subscribe/unSubscribe', subscribeVariables)
.then(response => {
if (response.data.success) {
setSubscribeNumber(SubscribeNumber - 1)
setSubscribed(!Subscribed)
} else {
alert('Failed to unsubscribe')
}
})

} else {
 // 구독 중이 아닐 때
axios.post('/api/subscribe/subscribe', subscribeVariables)
.then(response => {
if (response.data.success) {
setSubscribeNumber(SubscribeNumber + 1)
setSubscribed(!Subscribed)
} else {
alert('Failed to subscribe')
}
})
}

}


useEffect(() => {

const subscribeNumberVariables = { userTo: userTo, userFrom: userFrom }
axios.post('/api/subscribe/subscribeNumber', subscribeNumberVariables)
.then(response => {
if (response.data.success) {
setSubscribeNumber(response.data.subscribeNumber)
setLoading(false)
console.log("ddd", response)

} else {
alert('Failed to get subscriber Number')
}
})

axios.post('/api/subscribe/subscribed', subscribeNumberVariables)
.then(response => {
if (response.data.success) {
console.log('haha')
setSubscribed(response.data.subcribed)

} else {
alert('Failed to get Subscribed Information')
}
})


}, [])

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

}

export default Subscriber

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