질문이있습니다.!!!

width  px 박으니 xs{24} sm{6} md{6} 해준게 잘 안맞네용 ..ㅠㅠ 

다름이아니라 질문이 있습니다.

me.Posts.length, me.Followings.length, meFollwers.length 부분 

게시글 쓸때는 왼쪽 프로필에  짹짹length가 바로 변하던데 :

메인화면에서 팔로우랑 언팔로우 버튼 클릭시 

length와 버튼 name(팔로우, 언팔로우) 이 변하지 않아요.... 새로고침하면 정상적으로 변하더라구요

왜그런지 생각해봤는데 게시글 묶어줄땐 unshift 이고 

팔로우 언팔로우시에는 push 와 filter 인거 말고는 없는게 같은데 이게 문제는 아니지 않을까요? 잘 모르겠네요....

핵심은  기능은 정상적으로 작동합니다.. 단 새로고침시... 실시간으로는 버튼 name이랑 length 숫자가 안바끼네요... 보통 이벤트가 일어나면 react 특성상 리렌더링이 될텐데 말이죠...  ㅠㅠ

UserProfile, reducers, FollowButton  순입니다.!

return (
    <Card
        actions={[
            <div key="twit"><Link href={`/user/${me.id}`}><a>내가쓴글<br/>{me.Posts.length}</a></Link></div>,
            <div key="followings"><Link href="/profile"><a>팔로잉<br/>{me.Followings.length}</a></Link></div>,
             <div key="follower"><Link href="/profile"><a>팔로워<br/>{me.Followers.length}</a></Link></div>,
        ]}

switch (action.type) {
    case FOLLOW_REQUEST : // 팔로우 요청
        draft.followLoading = true;
        draft.followError = null;
        draft.followDone = false;
        break;
    case FOLLOW_SUCCESS : //팔로우 성공
        draft.followLoading = false;
        draft.me.Followings.push({id: action.data.UserId}); //unshift//push
        draft.followDone = true;
        break;
    case FOLLOW_FAILURE : //팔로우 실패
        draft.followLoading = false;
        draft.followError = action.error; //로그인 실패 확인
        break;
    case UNFOLLOW_REQUEST : //언팔로우 요청
        draft.unfollowLoading = true;
        draft.unfollowError = null;
        draft.unfollowDone = false;
        break;
    case UNFOLLOW_SUCCESS : //언팔로우 성공
        draft.unfollowLoading = false;
        draft.unfollowDone = true;
        draft.me.Followings = draft.me.Followings.filter((v) => v.id !== action.data.UserId);
        break;
    case UNFOLLOW_FAILURE : //언팔로우 실패
        draft.unfollowLoading = false;
        draft.unfollowError = action.error; //로그인 실패 확인
        break;

import React, { useCallback } from 'react';
import { Button } from 'antd';
import PropTypes from 'prop-types';
import { useSelector, useDispatch } from 'react-redux';
import { FOLLOW_REQUEST, UNFOLLOW_REQUEST } from '../reduces/user';

const FollowButton = ({ post }) => {
    const dispatch = useDispatch();
    const { me, followLoading, unfollowLoading } = useSelector((state) => state.user);
    const isFollowing = me?.Followings.find((v) => v.id === post.User.id);

    // 고차함수, 클로저, 스프레드 문법

//method
    const onClickButton = useCallback(() => {
        if (isFollowing) {
            dispatch({
                type: UNFOLLOW_REQUEST,
                data: post.User.id,
            });
        } else {
            dispatch({
                type: FOLLOW_REQUEST,
                data: post.User.id,
            });
        }
    }, [isFollowing]);

//    console.log(JSON.stringify(isFollowing)+"확인 ");


    // if (post.User.nickname === me.nickname) {
    //     return null;
    // }

    if(post.User.id === me.id) {
        return null;
    }

    return (
        <Button loading={followLoading || unfollowLoading} onClick={onClickButton}>
            {isFollowing ? '언팔로우' : '팔로우'}
        </Button>
    );
};

FollowButton.propTypes = {
    post: PropTypes.object.isRequired,
};

export default FollowButton;

antd에서 휠로 줄였을 때 가로로 길게 늘어지는 것 같아보이는 이유는 구역이 %로 나눠져있기 때문입니다. 휠로 줄이면 각 요소들은 작아지는데 %라는 것은 변하는 게 아니다보니 길게 늘어나는 것처럼 보이는 겁니다. 최상위 div의 width를 %가 아닌 px로 고정하면 다같이 줄어들겁니다.