<div id="readability-page-1" class="page"><div><h3 id="usemutation">useMutation</h3>
아래와 같은 <code>useMutataion</code> 훅을 구현한다고 가정하자. 
<code>useMutataion</code> 은 <code>mutate</code>와 <code>isLoading</code>을 return하고 <code>mutate</code>는 비동기적으로 <code>opts.mutation</code>을 호출하여 결과를 return한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/d43693ea-70de-48cd-8f76-ac18c045d3c5/image.png">
<code>useMutataion</code>에서 인자로 받는 <code>opts</code>는 <code>UseMutationOptions</code> 타입이고
<img src="https://velog.velcdn.com/images/dongha1992/post/cc2e14dc-3fed-4d01-a011-6947005bfbe8/image.png">
<code>opts.mutation</code>는 아래의 <code>MutationBase</code> 타입이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/53442179-9e4b-4bc4-aa9d-cc75322c2de0/image.png">
대력 아래와 같은 코드다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0203959f-0586-477d-8b50-f42ce24719ba/image.png">
이제 <code>useMutataion</code>을 사용하는데, 가상의 <code>createUser</code>라는 비동기 함수를 mutation으로 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/e0fe3471-cb77-4a43-b4d0-5fdb11e3146f/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/9ba06f55-1c3d-4f7f-8e24-bb0cb74c20c2/image.png">
여기엔 사소한 문제점이 있는데, 아래와 같이 <code>createUser</code>에서 정한 타입에 대해 타입 체킹이 이루어지지 않고 있다는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0599075d-9b29-46e1-b1c5-acde48bb1576/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/7162d06e-d7ed-4525-af25-2d142e55fe2a/image.png">
<code>mutate</code>의 인자 타입이 <code>any[]</code>로 지정되어 있기 때문이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/45d8d303-a17d-4b7f-82f5-e7c58ed52546/image.png">
궁극적으로 원하는 것은 <code>useMutatation</code>을 호출했을 때 <code>createUser</code>의 타입을 가져가는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/9ba06f55-1c3d-4f7f-8e24-bb0cb74c20c2/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/c6841f1a-7ef3-43e1-a4d1-fcbd99e2f274/image.png">
이제 <code>useMutatation</code>에 제대로된 타입을 지정해보자.
가장 먼저 <code>useMutatation</code>을 제네릭으로 변경을 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/23d6fe28-0520-4a5c-8fd1-9a7b67586e25/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/b188a1b1-dc57-43d0-a52a-104d08fc2ac1/image.png">
그리고 <code>UseMutationOptions</code>에서 <code>MutationBase</code>를 <code>TMutation</code>으로 변경해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/0b513380-4f05-4b0f-be0b-7e7ef4dd9fda/image.png">
제네릭으로 변경하게 되면 위와 같은 에러를 볼 수 있다. 타입을 제한해주지 않으면 <code>unknown</code>으로 인지하기 때문이다.
<code>TMutation</code>에 <code>extends</code>를 하여 제한을 걸어준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fe14376a-9132-47c9-8ae0-01aeb4a2f1e5/image.png">
이제 에러도 사라졌다.
<img src="https://velog.velcdn.com/images/dongha1992/post/384dcaa8-4882-4492-a448-a4274d916572/image.png">
여전히 <code>mutation.mutate</code>의 타입은 <code>MutationBase</code>이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/f8150c81-3d60-4f27-8579-cef6ffca26e7/image.png">
<code>mutation.mutate</code>의 타입도 제네릭하게 변경해줘야 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/af45535b-0201-4fa2-987a-65cddceb887c/image.png">
<code>UserMutationReturn</code>에서 기존의 <code>MutationBase</code>를 <code>TMutation</code>으로 바꿔주면
<img src="https://velog.velcdn.com/images/dongha1992/post/1520f15f-7695-48a0-83b1-a675380ba34e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/85ff4425-8ac7-4d02-95ef-a3a426f94c47/image.png">
제대로된 타입 체킹을 하는 것을 볼 수 있다.
하지만, 예상치 못한 에러를 발견하는데...
<code>useMutation</code>의 <code>mutate</code>에서 무언가 복잡한 컴파일 에러가 보인다.
<img src="https://velog.velcdn.com/images/dongha1992/post/492636a3-bddb-461e-9a68-802729a3b0b9/image.png">
ChatGPT의 도움을 받아 위 에러를 정리하자면 제네릭 타입 추론의 한계와 함수 시그니처 불일치가 원인이다.
<code>TMutation</code>은 <code>(...args: any[]) =&gt; Promise&lt;any&gt;</code>를 확장하지만 실제 구현체의 <code>mutate</code>는 <code>(...args: any[]) =&gt; Promise&lt;any&gt;</code>로 추론된다. 
즉, 구현체의 <code>mutate</code>가 <code>TMutation</code>으로 자동 추론되지 않은 것이 문제다
<code>TMutation</code>이 더 구체적인 타입일 경우, (가령 위에서처럼 <code>createUser</code>) 타입 불일치 발생하는 것이다. 
위와 같은 상황에서 타입 계층은 아래와 같다. 
<pre><code>MutationBase (기저 타입, any[] 기반)
└── TMutation (구체적 타입, ex: createUser)
 └── 구현체의 mutate 타입 (any[] 기반)</code></pre>
함수 매개변수는 <a href="https://wonsss.github.io/typescript/covariance/">역공변적</a>으로 동작한다. 
즉, 구현체의 매개변수 타입이 원본 타입의 상위 타입(supertype)이어야 한다. 그래서 반대 방향의 할당만 가능한 것이다. 
<code>(a: string) =&gt; ...</code> → <code>(...args: any[]) =&gt; ...</code> 가능
<code>(...args: any[]) =&gt; ...</code> → <code>(a: string) =&gt; ...</code> 불가능
(함수 타입의 경우, 여러 개의 overloading과 계층 문제로 복잡해질 수도 있다고 한다.)
문제를 해결하기 위해서는 <code>extends</code>를 변경해주면 된다. <code>MutationBase</code>라고 함수 타입 전체를 퉁치는 것이 아니라 매개변수 타입과 반환 타입으로 나눠서 타입을 확장한다, 
<img src="https://velog.velcdn.com/images/dongha1992/post/7d660b99-903b-443f-b7c7-0935fc05f8ea/image.png">
먼저, <code>extends</code> 대신 <code>&lt;TArgs, TReturn&gt;</code>으로 제네릭을 선언해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/fcb7ca57-3b2f-4496-b853-dacea944490c/image.png">
그리고 <code>TMutationBase</code>도 <code>&lt;TArgs, TReturn&gt;</code>로 인자와 리턴 타입을 변경한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/aeab2f19-c77e-4e28-a880-a1ef767a06a2/image.png">
그리고 <code>UseMutationReturn</code>과 <code>UseMutationOptions</code>에도 동일하게 <code>&lt;TArgs, TReturn&gt;</code>를 적용해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/f1e15eed-b918-4dae-a31c-0fc2a53baeb1/image.png">
이제 구현체를 살펴보면 <code>mutate</code>도 제네릭으로 잘 추론되고
<img src="https://velog.velcdn.com/images/dongha1992/post/ea7e6345-58d0-4020-b7e8-60cbac362b4d/image.png">
이제 구현체를 살펴보면 <code>mutate</code>의 인자 <code>args</code>는 <code>TArgs</code>로 잘 추론된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ed39b7be-180f-4768-a8dc-3db5d2fa621a/image.png">
타입 파라미터 정밀화하기 위해서는 <code>extends 함수형 타입</code> 을 지양하는 것이 좋다. 
아래는 전체 코드
<img src="https://velog.velcdn.com/images/dongha1992/post/78d0c358-27b3-4ab2-bbb2-6104106e319e/image.png">
참고 : <a href="https://www.totaltypescript.com/">total typescript</a> </div></div>

삶도 재입학이 되나요?

useMutation
아래와 같은 useMutataion 훅을 구현한다고 가정하자. 
useMutataion 은 mutate와 isLoading을 return하고 mutate는 비동기적으로 opts.mutation을 호출하여 결과를 return한다.
useMutataion에서 인자로 받는 opts는 UseMutationOptions 타입이고
opts.mutation는 아래의 MutationBase 타입이다.
대력 아래와 같은 코드다. 
이제 useMutataion을 사용하는데, 가상의 createUser라는 비동기 함수를 mutation으로 한다.
여기엔 사소한 문제점이 있는데, 아래와 같이 createUser에서 정한 타입에 대해 타입 체킹이 이루어지지 않고 있다는 것이다. 
mutate의 인자 타입이 any[]로 지정되어 있기 때문이다. 
궁극적으로 원하는 것은 useMutatation을 호출했을 때 createUser의 타입을 가져가는 것이다. 
이제 useMutatation에 제대로된 타입을 지정해보자.
가장 먼저 useMutatation을 제네릭으로 변경을 한다.
그리고 UseMutationOptions에서 MutationBase를 TMutation으로 변경해준다. 
제네릭으로 변경하게 되면 위와 같은 에러를 볼 수 있다. 타입을 제한해주지 않으면 unknown으로 인지하기 때문이다.
TMutation에 extends를 하여 제한을 걸어준다. 
이제 에러도 사라졌다.
여전히 mutation.mutate의 타입은 MutationBase이다. 
mutation.mutate의 타입도 제네릭하게 변경해줘야 한다. 
UserMutationReturn에서 기존의 MutationBase를 TMutation으로 바꿔주면
제대로된 타입 체킹을 하는 것을 볼 수 있다.
하지만, 예상치 못한 에러를 발견하는데...
useMutation의 mutate에서 무언가 복잡한 컴파일 에러가 보인다.
ChatGPT의 도움을 받아 위 에러를 정리하자면** 제네릭 타입 추론의 한계와 **함수 시그니처 불일치가 원인이다.
TMutation은 (...args: any[]) => Promise<any>를 확장하지만 실제 구현체의 mutate는 (...args: any[]) => Promise<any>로 추론된다. 
즉, 구현체의 mutate가 TMutation으로 자동 추론되지 않은 것이 문제다
TMutation이 더 구체적인 타입일 경우, (가령 위에서처럼 createUser) 타입 불일치 발생하는 것이다. 
위와 같은 상황에서 타입 계층은 아래와 같다. 
MutationBase (기저 타입, any[] 기반)
└── TMutation (구체적 타입, ex: createUser)
 └── 구현체의 mutate 타입 (any[] 기반)
함수 매개변수는 역공변적으로 동작한다. 
*즉, 구현체의 매개변수 타입이 원본 타입의 상위 타입(supertype)이어야 한다. 그래서 반대 방향의 할당만 가능한 것이다. *
(a: string) => ... → (...args: any[]) => ... 가능
(...args: any[]) => ... → (a: string) => ... 불가능
(함수 타입의 경우, 여러 개의 overloading과 계층 문제로 복잡해질 수도 있다고 한다.)
문제를 해결하기 위해서는 extends를 변경해주면 된다. MutationBase라고 함수 타입 전체를 퉁치는 것이 아니라 매개변수 타입과 반환 타입으로 나눠서 타입을 확장한다, 
먼저, extends 대신 <TArgs, TReturn>으로 제네릭을 선언해준다. 
그리고 TMutationBase도 <TArgs, TReturn>로 인자와 리턴 타입을 변경한다. 
그리고 UseMutationReturn과 UseMutationOptions에도 동일하게 <TArgs, TReturn>를 적용해준다. 
이제 구현체를 살펴보면 mutate도 제네릭으로 잘 추론되고
이제 구현체를 살펴보면 mutate의 인자 args는 TArgs로 잘 추론된다. 
타입 파라미터 정밀화하기 위해서는 extends 함수형 타입 을 지양하는 것이 좋다. 
아래는 전체 코드
참고 : total typescript

Total Typescript - hooks

댓글