내가 구현한 코드

const ReferralModal: FC<ModalPopupProps> = ({
  onRequestClose,
  width = `92%`,
  showCloseButton = true,
  message,
  fontColor,
  referralCode, // => 현재 부모 컴포넌트에서 referralCode라는 상태값을 받아오고 있음
  onConfirmHandler,
  ...props
}) => {
  const {
    data: getReferraCodeData,
    isFetching,
    refetch,
  } = useCheckReferralCode(referralCode);
  return (
    <S.StyledIonModal width={width} onRequestClose={onRequestClose} {...props}>
      {showCloseButton && (
        <IonToolbar>
          <IonButtons slot="start">
            <S.ModalTitle>Confirm</S.ModalTitle>
          </IonButtons>
          <IonButtons slot="end">
            <Button
              fill="clear"
              onClick={onRequestClose}
              data-test-id="closeModalPopup"
              type="button"
            >
              <IonIcon slot="icon-only" icon={close} />
            </Button>
          </IonButtons>
        </IonToolbar>
      )}
      <S.ResultContent>
        <S.ResultMessage fontColor={fontColor}>{message}</S.ResultMessage>
      </S.ResultContent>
      <S.BtnContainer>
        <S.BtnConfirm
          size="large"
          expand="block"
          id="btnReferralCancle"
          fill="outline"
          onClick={onRequestClose}
        >
          <InnerText>Cancel</InnerText>
        </S.BtnConfirm>
        <S.BtnConfirm size="large" expand="block" onClick={onConfirmHandler}>
          <InnerText>OK</InnerText>
        </S.BtnConfirm>
      </S.BtnContainer>
    </S.StyledIonModal>
  );
};

export default ReferralModal;

★코드가 좋지 못한 이유

<aside> 💡 현재 위 코드의 경우 컴포넌트 로직 하나당 state 하나를 생성해줘야하고, props drilling이 될 수 있는 상태이다. 만약, props drilling을 피하기 위해 store을 사용하게 되면 상태관리가 늘어나게 되는 것이다.

</aside>

☘️개선 하기 위해 도입해야할 부분

refetch이용한 방법

refetch란 무엇일까?

리액트 공식문서에 따르면 리페치는 쿼리를 수동으로 다시 가져오는 기능이다.

//component.tsx
  const { isLoading, refetch } = useGetDataAfterClick();

  const handleBtn = () => {
    refetch();
  }
  
  if(isLoading) return <div>loading...</div>

  //...

  <button onClick={handleBtn}></button>

위와 같이 버튼을 클릭하는 경우 refetch가 될 수 있도록 설정을 해 놓으면, state나 props drilling에 대한 걱정 없이 코드를 구현할 수 있다.

또한 custom Hook 역시 아래와 같이 깔끔해 질 수 있다.

//Custom Hook
export const useGetDataAfterClick = () =>
	useQuery(
      ['get/dataAfterClick'],
      () => GetFetcher(),
      {
        enabled: false,
        onSuccess: () => {
          //Data Transform
      }
    );

실제 프로젝트 코드에 도입하면 아래와 같다.