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

열씨미살자!

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

팔로우, 언팔로우 구현하기

팔로우 버튼 로딩.

작성

324

팔로우와 언팔로우 로딩에 관련되서 질문이 있습니다.

현재 팔로우 버튼이나 언팔로우 버튼을 누르면 전체 버튼이 로딩되는 것에 대해 질문이 있습니다.

각자의 버튼이 각자의 loading을 가질려고 하면 어떻게 할 수 있을까요?

react express redux nodejs Next.js

답변 3

NOAH

해결 비슷하게 하긴 했는데요. 접근법이 괜찮은지 여쭙고자 다시 한 번 여쭤봅니다.

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'}
    </Button>
  );
}

제로초(조현영)

지식공유자

네 이렇게 하시면 됩니다!

NOAH

일찍 일어나셨네요. 여기는 한국이랑 시간이 반대여서..ㅎ

오늘도 좋은 하루 되세요.

NOAH

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

이 부분 해보려는데 잘 이해가 안되네요.. 혹시 코드 한 줄만 써주실수있을까요?

post.User.id의 경우는 어차피 PostCard마다 다 갖고있기에 별 의미가 없는거 같고 버튼 클릭시에만 그 PostCard라는걸 알 수 있어서 const click = true; 이런식으로 바꿔서 click && followRequestLoading 이런식으로 해보려했으나 click을 버튼 클릭후 어떤 부분에서 false로 초기화 시켜야 할지 잘 감이 안와서요.

간단한 문제 같은데 이거조차 헤매다니 창피하네요 ㅠㅠ..

제로초(조현영)

지식공유자

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

열씨미살자!

작성한 질문수

전체 Q&A

질문하기