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

김찬호님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

구독 기능 (2)

VideoDetailPage에서 Subscribe관련 질문

해결된 질문

작성

·

152

0

VideoDetailPage가 render되고 Subscribe 컴포넌트에서 useEffect 사용으로 state변화로 rerender되서 Subscribe버튼이 Subscribe -> Subscribed 로 보여지는게 싫어서 처음부터 Subscribed로 랜더할수있게 하는 방법이 있을까요?

답변 2

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

아마  이게 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

김찬호님의 프로필 이미지
김찬호
질문자

proxy는 생각못했는데 하나 더 배웁니다 감사합니다 그리고 서버사이드렌더링 공부도 해야겠습니다. : >