-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
VideoDetailPage에서 Subscribe관련 질문
20.05.11 18:08 작성 조회수 97
0
VideoDetailPage가 render되고 Subscribe 컴포넌트에서 useEffect 사용으로 state변화로 rerender되서 Subscribe버튼이 Subscribe -> Subscribed 로 보여지는게 싫어서 처음부터 Subscribed로 랜더할수있게 하는 방법이 있을까요?
답변을 작성해보세요.
1
John Ahn
지식공유자2020.05.11
아마 이게 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
0
답변 2