[TIL] 비동기 함수로부터 받아오는 data에 제네릭 사용하기

💡 TIL 20230914 - 비동기 함수로부터 받아오는 data에 제네릭 사용하기

---

비동기 함수로부터 받아오는 data에 타입 에러 발생

useMutation.tsx에서 useMutation 훅을 통해 받아오는 데이터의 형식을 아래와 같이 지정해두었다.

// src/hooks/useMutation.tsx

interface UseMutationState<T> {
  loading: boolean;
  data?: object;
  error?: object;
}

 

// src/components/Auth/Auth.tsx

// 생략
  return (
    // ... 중간 생략
          {data?.ok ? null : (
            <form onSubmit={handleSubmit(onValid)} className="flex flex-col mt-8">
            <div className="mt-1">
              {method === "email" ? (
                <>

그랬더니 위의 data?.ok 부분에서 'Property 'ok' does not exist on type 'object'. ts(2339)' 타입 에러가 발생한다.

 

useMutation을 통해 받아오는 data는 비동기 함수로 받아오기 때문에 선언 시점에 데이터 타입을 판별하기 어렵다. 따라서 data가 생성되는 시점(비동기를 통해 data를 받아오는 시점)에 타입을 명시해주어야 한다. 이를 위해 제네릭을 사용해서 타입을 지정하였다.

 

---

제네릭 타입(Generic Type)이란?

선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법

• 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.
• T는 제네릭을 선언할 때 관용적으로 사용되는 식별자로 타입 파라미터(Type parameter)라 한다.
• 함수에도 제네릭을 사용할 수 있다. 제네릭을 사용하면 하나의 타입만이 아닌 다양한 타입의 매개변수와 리턴값을 사용할 수 있다.

 

useMutation.tsx

import { useState } from "react";

interface UseMutationState<T> {
  loading: boolean;
  data?: T;
  error?: object;
}

type UseMutationResult<T> = [(data: any) => void, UseMutationState<T>];

const useMutation = <T = any>(url: string): UseMutationResult<T> => {
  const [state, setState] = useState<UseMutationState<T>>({
    loading: false,
    data: undefined,
    error: undefined,
  })
  const mutationFn = async (data: any) => {
    fetch(url, {
      method: "POST",
      body: JSON.stringify(data),
    })
      .then((res) => res.json().catch(() => {}))
      .then((data) => setState((prev) => ({ ...prev, data, loading: false })))
      .catch((error) => setState((prev) => ({ ...prev, error })))
      .finally(() => setState((prev) => ({ ...prev, loading: false })))
  };
  return [mutationFn, { ...state }];
};

export default useMutation;

• <T = any> : 우선 useMutation.tsx에서 useMutation에 제네릭을 사용해서 기본적으로 any 타입을 가진다고 선언해주었다.
• UseMutationResult<T> : 이걸 UseMutationResult로 보내고,
• UseMutationState<T> : UseMutationResult가 받으면 UseMutationState에도 보내준다.
• data?: T : UseMutationState가 받으면 data?: 도 T타입이라고 명시해준다.

 

제네릭을 사용한 Auth.tsx 결과

// components/Auth.tsx

"use client";
import { NextComponentType } from "next";
import { useState } from "react";

import { useForm } from "react-hook-form";
import { useMutation, useIsMobile } from "@/hooks";

import { TabButtons, Button, Input } from "@/components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComment } from "@fortawesome/free-solid-svg-icons";

interface AuthForm {
  email?: string;
  phone?: string;
}

// AuthMutationResult 추가
interface AuthMutationResult {
  ok: boolean;
}

const Auth: NextComponentType = () => {
	// ... 중간 생략
    
  return (
    // ... 중간 생략
        <div className="max-w-2xl mx-auto">
          {data?.ok ? null : (
            <form onSubmit={handleSubmit(onValid)} className="flex flex-col mt-8">

위와 같이 data의 타입이 AuthMutationResult 또는 undefined로 타입이 지정된 것을 확인할 수 있다.

 

---

참고 사이트

노마드 코더 - 캐럿마켓 클론코딩

12.7 TypeScript - Generic | PoiemaWeb