질문이있습니다.!!!

안녕하세요 질문이 있습니다.!!(늘 감사합니다.. 질문 많이하는데...)

기본적으로 레이아웃을 제가 짤줄을 잘 모릅니다.! 사실 짜기도 싫기도 한데...

그럼에도 불구하고 그래도 어느정도 레이아웃 구색은 짤줄은 알면 좋을 것같아서요.

현 강의 기준 마우스 휠로 레이아웃 비율을 줄이면 가로로 길게 줄어드는데

보통의 레이아웃은 마우스 휠로 줄이면 전체적으로 줄어들잖아요

제로초님 블로그도 마우스 휠로 줄이면 세로 가로로 비율에 맞게 줄어들던데

그 현 강의는 antd 요소테마만 가지고해서 가로로 길게 늘어뜨려지는건가요? 휠로 줄이면

css와 div로 레이아웃 설계를 하고 그 위?안?에 antd 테마를 넣으신건가요?

그렇다면 템플릿을 쓰는게아니면 브라우저 비율을 줄일때 전체적으로 줄어들게하려면 기본 레이아웃틀 위에 antd 테마를 넣어야 겠네용?

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;

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