OnSuccess 대신 방법

import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import { useQuery } from '@tanstack/react-query';
import KStadiumAPI from 'apis/kstadiumAPI';
import { selectUserSlice } from 'store';

const useCheckReferralCode = (code: string, isValid = false) => {
  const [errorMsg, setErrorMsg] = useState<string>(``);

  const { userData } = useSelector(selectUserSlice);
  const { data, isSuccess, refetch } = useQuery(
    [`CHECK_REFERRAL_CODE_KEY`, code, isValid],
    () => KStadiumAPI.getReferralCode(code),
    {
      refetchOnWindowFocus: false,
      enabled: !!code && isValid,
      // eslint-disable-next-line consistent-return
      // onSuccess: (data): string | undefined => {
      //   if (data.data?.userId === null) {
      //     console.log(`Invalid referral code. Please try again.`);
      //     return `Invalid referral code. Please try again.`;
      //   }
      //   if (data.data?.userId === userData!.userId) {
      //     console.log(`You cannot register using your own referral code.`);
      //     return `You cannot register using your own referral code.`;
      //   }
      // },
    },
  );

  useEffect(() => {
    if (data === undefined) return 
		setErrorMsg(``);

    if (data?.data?.userId === null) {
      setErrorMsg(`Invalid referral code. Please try again.`);
    }

    if (data?.data?.userId === userData!.userId) {
      setErrorMsg(`You cannot register using your own referral code.`);
    }
  }, [data, userData]);

  return { data, isSuccess, refetch, errorMsg };
};
export default useCheckReferralCode;

⭐️코드를 작성하며 질문했던 내용들

• ts와 tsx의 차이
  • return 여부
    • 리턴을 시키지 않기 때문에 전처리를 useCheckReferralCod에서 해주고 useffect를 통해 처리한 errorMsg와 함께 return을 시켜 필요한 것들만 가져다가 ReferralToEarnPage에서 사용을 할 수 있다.
  • 잘 풀리지 않을 때는 console.log 찍어보기

☘️찾아보기

• onSuccess,onError,onSetteled가 deprecated되는 이유 찾아보기.

  React Query V5 변경사항

  • 콜백이 잠재적으로 여러번 호출 될 수 있다.
  • 콜백을 사용해 상태를 동기화하게 된다.(Bad Code)
    • → 추가적인 렌더링 사이클을 만들어냄.
    • →콜백이 실행되지 않을 가능성이 있음

  <aside> 💡 API는 간단하고 직관적이며 일관되어야 합니다. useQuery의 콜백은 이 기준에 부합하는 것처럼 보이도록 위장한 버그 생산기입니다. 처음 구현할 때는 원하는 대로 작동할 가능성이 높지만, 앱이 성장함에 따라 리팩터링 하거나 확장할 때는 대가가 따르기 때문에 아주 안 좋습니다. 또한 에러가 발생하기 쉬운 상태 동기화를 도입하면서도 이게 나쁘다고 느끼지 않기 때문에 안티 패턴을 초래합니다. 이 API가 애초에 없는 게 더 나은 이유이며 이게 바로 저희가 이 API를 없애는 이유입니다.

  </aside>

• if 문 보다 swith 문을 선호하는 이유가 있는지?

  Switch 문법 VS IF 문법