팔로우 버튼 로딩.

Question

팔로우와 언팔로우 로딩에 관련되서 질문이 있습니다. 현재 팔로우 버튼이나 언팔로우 버튼을 누르면 전체 버튼이 로딩되는 것에 대해 질문이 있습니다. 각자의 버튼이 각자의 loading을 가질려고 하면 어떻게 할 수 있을까요?

NOAH · Answer

해결 비슷하게 하긴 했는데요. 접근법이 괜찮은지 여쭙고자 다시 한 번 여쭤봅니다. followRequestAction을 보내면서 보내는 post.User.id를 redux의 state에 저장을 하고 클릭시 클릭되는 버튼의 id와 같으면 로딩이 되도록하니 되더라고요. 이렇게 리덕스에 넣고 하는게 괜찮은 방법인지 여쭤봅니다. 이 방법이 현영님께서 말씀하신 방법 같긴한데요. followBtnId가 followRequest를 보내면서 id를 저장하는 state 변수입니다. switch ( action .type) { case FOLLOW_REQUEST : draft .followLoading = true ; draft .followDone = false ; draft .followError = null ; draft .followBtnId = action .data; break ; 위와 같이 request시 id를 저장하고 아래에서 불러와서 post.User.id와 비교하여 loading 이벤트에 넣어주었습니다. function FollowButton ({ post }) { const dispatch = useDispatch (); const { me , followLoading , unfollowLoading , followBtnId } = useSelector ( ( state ) => state .user ); const isFollowing = me ?.Followings. find (( v ) => v .id === post .User.id); const isClickedBtn = post .User.id === followBtnId ; const onClickButton = useCallback (() => { if ( isFollowing ) { dispatch ( unfollowRequestAction ( post .User.id)); } else { dispatch ( followRequestAction ( post .User.id)); } }, [ isFollowing ]); return ( < Button loading ={ isClickedBtn && ( followLoading || unfollowLoading ) } onClick ={ onClickButton } > { isFollowing ? ' Unfollow ' : ' Follow ' } ); }

NOAH · Answer

post id도 같이 넣으셔서 컴포넌트에서 그 포스트인 경우 && 버튼 클릭 시에만 로딩창이 돌아가게 제한하는 것도 방법인 것 같습니다. 이 부분 해보려는데 잘 이해가 안되네요.. 혹시 코드 한 줄만 써주실수있을까요? post.User.id의 경우는 어차피 PostCard마다 다 갖고있기에 별 의미가 없는거 같고 버튼 클릭시에만 그 PostCard라는걸 알 수 있어서 const click = true; 이런식으로 바꿔서 click && followRequestLoading 이런식으로 해보려했으나 click을 버튼 클릭후 어떤 부분에서 false로 초기화 시켜야 할지 잘 감이 안와서요. 간단한 문제 같은데 이거조차 헤매다니 창피하네요 ㅠㅠ..

제로초(조현영) · Answer

지금은 LOAD_FOLLOW_REQUEST 하나만 되어있어서 모든 버튼에 로딩창이 돌아갑니다. LOAD_FOLLOW_REQUEST에 post id도 같이 넣으셔서 컴포넌트에서 그 포스트인 경우 && 버튼 클릭 시에만 로딩창이 돌아가게 제한하는 것도 방법인 것 같습니다.