VideoDetailPage에서 Subscribe관련 질문

Question

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

John Ahn · Answer

아마 이게 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 > ) } 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 ' } ) } } export default Subscriber

김찬호 · Answer

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