문제점

마이 페이지를 들어왔을 때

⇒ 현재 사용하지 않는 follows, followers도 함께 get되는 중,,

현재 코드

// MyProfileInfo.tsx
export default function MyProfileInfo({ level, followers, follows, posts }: MyProfileInfoPropsType) {
  const navigate = useNavigate();
  const [type, setType] = useState('');
  const [isUserList, setIsUserList] = useState<boolean>(false);

  const handleClickFollower = () => {
    setIsUserList(!isUserList);
    setType('follower');
  };

  const handleClickFollow = () => {
    setIsUserList(!isUserList);
    setType('follow');
  };

  return (
    <>
      <UserListModal isUserList={isUserList} setIsUserList={setIsUserList} type={type} />
      <div className="mt-3 flex h-[185px] w-full flex-col rounded-2xl bg-midIvory text-lightText dark:bg-sky dark:text-white">
        ...
          <div onClick={handleClickFollower} className="flex cursor-pointer flex-col items-center justify-around text-[22px] font-bold">
            <div>{followers}</div>
            <div className="mt-2 text-[18px] font-medium">팔로워</div>
          </div>
          <div onClick={handleClickFollow} className="flex cursor-pointer flex-col items-center justify-around text-[22px] font-bold">
            <div>{follows}</div>
            <div className="mt-2 text-[18px] font-medium">팔로우</div>
          </div>
          ...
      </div>
    </>
  );
}

// UserListModal.tsx
export default function UserListModal({ isUserList, setIsUserList, type }: ConfirmModalPropsType) {
  const cancelButtonRef = useRef(null);
  const navigate = useNavigate();

  const { data: followersData, isLoading: followersIsLoading, error: followersError } = useMyFollowersQuery();
  const { data: followsData, isLoading: followsIsLading, error: followsError } = useMyFollowsQuery();
  console.log(followersData);
  const data = type === 'follower' ? followersData : followsData;

  return (...)

원하는 방향

현재 수정한 코드 (괜찮은 방법일까?? 👀)

enabled를 false로 설정해줘서 바로 get하지 않게!

type이 바뀔 때 refetch하기! ⇒ 원할 때만 get 가능!

// UserListModal.tsx
const { data: followersData, isLoading: followersIsLoading, error: followersError, refetch: followersRefetch } = useMyFollowersQuery();
  const { data: followsData, isLoading: followsIsLading, error: followsError, refetch: followsRefetch } = useMyFollowsQuery();

  const data = type === 'follower' ? followersData : followsData;

  useEffect(() => {
    if (type === 'follow') {
      followsRefetch();
    } else if (type === 'follower') {
      followersRefetch();
    }
  }, [type]);

//useMyProfileQuery.ts
export function useMyFollowersQuery() {
  return useQuery(['myFollowers'], () => getMyFollowerList(accessToken), {
    enabled: false,
    refetchOnMount: true,
    refetchOnReconnect: true,
    refetchOnWindowFocus: true, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
    retry: 0, // 실패시 재호출 몇번 할지
    staleTime: Infinity,
    cacheTime: Infinity,
  });
}

export function useMyFollowsQuery() {
  return useQuery(['myFollows'], () => getMyFollowList(accessToken), {
    enabled: false,
    refetchOnMount: true,
    refetchOnReconnect: true,
    refetchOnWindowFocus: true, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
    retry: 0, // 실패시 재호출 몇번 할지
    staleTime: Infinity,
    cacheTime: Infinity,
  });
}

현재 작성한 <나의 팔로워, 팔로우 리스트 보기 + 다른 사람의 팔로워, 팔로우 리스트 보기>

data의 삼항연산자 좋은 것 같진 않음 ⇒ useState, useEffect를 사용해보려했지만 실패 (왜지?)