<div id="readability-page-1" class="page"><div><h3 id="1-hoc">1. HOC</h3>
<h4 id="코드">코드</h4>
리액트에서 자주 사용되는 HOC 패턴의 타입을 지정해보자!
<img src="https://velog.velcdn.com/images/dongha1992/post/a3e65bef-d221-4966-ba00-87e4a6b9a7e5/image.png">
여기 <code>WrappedComponent</code>가 있다. <code>WrappedComponent</code>는<code>UnwrappedComponent</code>와 <code>withRouter</code>의 컴포지션이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/9c7ba997-cf06-4257-80e9-0959acd4c093/image.png">
<code>UnwrappedComponent</code> 단순히 <code>router</code>와 <code>id</code>를 props로 받는다.
<img src="https://velog.velcdn.com/images/dongha1992/post/156767d3-f298-45d8-80ba-17ddf4781455/image.png">
<code>withRouter</code>는 컴포넌트를 받아 <code>router</code>를 주입한 새로운 컴포넌트를 반환한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c7c815e2-0ae3-4545-bfeb-b04d9f574452/image.png">
<h4 id="문제">문제</h4>
이제 <code>WrappedComponent</code>를 사용해보면 여기서 몇 가지 문제점이 발견된다. 
먼저 <code>WrappedComponent</code>는 <code>router</code>를 주입받기 때문에 props로 필요가 없는데도 불구하고 <code>router</code>를 props로 내려도 에러가 발생하지 않는다
그리고, <code>UnwrappedComponent</code>의 props 중 <code>id</code>는 string임에도 number 타입을 내려도 에러가 발생하지 않는다.
이러한 문제를 해결해보자. 
<h4 id="withrouter-hoc-함수의-타입">withRouter HOC 함수의 타입</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/0940e144-2831-4d37-95b8-1db77dfe0328/image.png">
HOC 함수에서 아우터 함수 (<code>Component</code>를 props로 받는)와 이너 함수(<code>props</code>를 props로 받는)의 타입을 각각 정해줘야 한다.
<code>props</code> 경우 제네릭이므로 <code>TProps</code>제네릭으로 만들고 <code>Component</code>는 그 제네릭한 <code>props</code> 를 인자로 받아 <code>ReactNode</code>를 반환한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/d475cdad-efda-4baf-9666-e5115fc4b14d/image.png">
<code>TProps</code>와 <code>ReactNode</code> 추가해준다. 
<h4 id="omit">omit</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/27d55673-1935-473e-9738-c71966425029/image.png">
그럼 타입스크립트는 <code>router</code> 타입이 필요하다는 추론을 해준다. 하지만, <code>WrappedComponent</code>의 경우 <code>router</code> props는 필요하지 않다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ddb0f973-ec5a-49c9-90bb-78b18749e952/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/7b90c8a9-b63a-4dc1-8ea9-52e91d3ca464/image.png">
<code>omit</code>을 추가해주면 <code>&lt;Component/&gt;</code>에서 장황한 에러를 발생시킨다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/099471ea-37e9-40f1-90b7-6b9cb3e6701b/image.png">
즉, <code>TProps</code>가 <code>router</code> 프로퍼티를 포함한다는 것을 타입스크립트가 명시적으로 알지 못하기 때문에 발생한다. 
단계별로 살펴보면 <code>Omit&lt;TProps, "router"&gt;</code>는 <code>TProps</code>에 <code>router</code>가 없는 경우 아무 작업도 하지 않는다.
그렇기 때문에 <code>{...props} + router={router}</code> 조합 시 <code>TProps</code>에 이미 <code>router</code>가 있을 수 있다고 타입스크립트는 판단하는 것이다. 
즉, 개발자가 <code>as</code>를 통해 타입을 강제해야 하는 상황이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/552781e3-1b79-48a6-9feb-26017373c7f3/image.png">
이제 에러를 해결했다.
<h4 id="displayname">displayName</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/886a1b7f-ba04-4ccc-ac4a-8f1c12729998/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/fdccd40f-5fb4-49cc-9777-4882ea91994f/image.png">
위 에러를 해결하기 위해서는 <code>React.FC</code> 혹은 <code>ComponentType</code>을 타입을 사용해야 한다. 
<h4 id="해결">해결</h4>
이제 원하는대로 타입 체킹을 잘 해주게 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/bde1b768-6585-4009-a36a-d1fe603db579/image.png">
<code>UnwrappedComponent</code>의 경우 <code>router</code> 프롭스가 필요하다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/3c407f4d-8d2f-4aae-b65d-f2416fe87f11/image.png">
<code>WrappedComponent</code>의 경우 <code>router</code> 프롭스가 없어도 된다.
<img src="https://velog.velcdn.com/images/dongha1992/post/bfd8a6ee-6019-4d3a-9921-12feef9fa7ff/image.png">
props의 타입도 잘 체킹해준다. 
<h3 id="2-hoc-with-generic">2. HOC with generic</h3>
<h4 id="코드-1">코드</h4>
이제 아까 만든 <code>withRouter</code>를 사용해본다고 가정하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/660fbf35-6926-4c32-868e-8b6e04a2a68e/image.png">
테이블 컴포넌트는 <code>TableProps</code>타입을 받아서 <code>table</code>을 렌더링한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a0b08824-9ac0-409b-a61c-9e69df74dcf0/image.png">
1번 예제와 동일하게 <code>withRouter</code>로 맵핑해주고
<img src="https://velog.velcdn.com/images/dongha1992/post/b0b72932-ca8b-4826-ba68-91f9429e84e8/image.png">
이렇게 사용한다.
<h4 id="문제-1">문제</h4>
역시나 문제가 생긴다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8673f5d8-df8d-4b1b-8e00-c8d58df0054b/image.png">
그냥 <code>&lt;Table/&gt;</code>를 사용했을 때 (1번 예시에서의 UnwrappedComponent같이 withRouter 없이) <code>router</code>를 HOC로 주입해주는데도 <code>router</code>가 필요하다는 타입 에러가 발생하고
<img src="https://velog.velcdn.com/images/dongha1992/post/3ddca202-32de-4c17-8f96-a899b766558a/image.png">
<code>row</code>의 타입을 추론하지 못하는 것!
그럼 늘 그렇듯 해결에 나서보자 
<h4 id="구조적-타입-시스템의-한계">구조적 타입 시스템의 한계</h4>
<img src="https://velog.velcdn.com/images/dongha1992/post/ae8b6e2a-589c-44e9-b0d0-10cf83d8acd4/image.png"> 
반환 타입으로 <code>ComponentType</code>을 사용한 이유는 <code>displayName</code>의 타입이 <code>React.ReactNode</code>에 없어서였다. 
하지만, 타입스크립트에서 함수에 속성을 추가하면 호출 시그니처 + 객체 속성의 교차 타입으로 추론한다. 
간단히 설명하자면
<ol>
<li>
기존 함수 타입인 <code>(props: TProps) =&gt; ReactElement</code> 
</li>
<li>
<code>displayName</code>이라는 속성을 추가
</li>
<li>
<code>{ (props: TProps): ReactElement; displayName: string }</code> 객체 리터럴 타입으로 추론함
</li>
<li>
반환된 <code>NewComponent</code>는 함수 + displayName 속성을 가진 객체로 추론
</li>
</ol>
<img src="https://velog.velcdn.com/images/dongha1992/post/026cb944-c997-40f2-b345-4b479add1dd3/image.png">
<ol start="5">
<li>여기서 객체 타입으로 추론되면서 <code>TProps</code>와 연결이 끊어지는 제네릭 컨텍스트 손실이 일어난다. 그래서 <code>unknown</code>으로 타입이 추론되는 것이다. </li>
</ol>
이 로직 중에서 헷갈렸던 부분이 <code>ComponentType</code>에는 <code>displayName</code> 속성이 있는데 왜 합쳐서 객체로 추론해버릴까였다.
<img src="https://velog.velcdn.com/images/dongha1992/post/9e5c11c5-30f8-44be-ba9b-ccebf153c835/image.png">
찾아보니 이는 구조적 타입 시스템의 한계라고 한다. 즉, 타입스크립트는 값의 형태에 타입을 의존하기 때문에 수동으로 속성을 추가하면 새로운 객체 타입으로 추론하면서 기존의 타입을 인식하지 못한다고 한다. (와 진짜 어렵네)
정리하자면 
<ol>
<li>
타입스크립트의 구조적 타입 시스템 때문에 발생
</li>
<li>
타입스크립트는 값의 형태(Shape) 에 집중
</li>
<li>
함수에 속성이 추가되면 새로운 형태의 객체로 인식
</li>
<li>
이 과정에서 제네릭 타입 매개변수(TProps) 와의 연결이 유실
</li>
</ol>
<img src="https://velog.velcdn.com/images/dongha1992/post/205e7cd6-0cda-4aaf-b622-0cf22cc092d1/image.png">
그럼 이제 <code>Component</code>의 타입을 <code>ReactNode</code>로 변경해준다.
<img src="https://velog.velcdn.com/images/dongha1992/post/b018d527-0dda-4057-ab73-4dd102bf5ebc/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/05609c7b-4d67-48e1-a14f-6c7156565871/image.png">
그리고 <code>withRouter</code>의 타입을 확인해보면 <code>unknown</code>과 여전히 리턴 타입이 객체임을 확인할 수 있다. (제네릭이 소실된다)
<h4 id="해결-1">해결</h4>
가장 간단한 방법은 <code>as</code>다
<img src="https://velog.velcdn.com/images/dongha1992/post/d45f0248-fcac-41d7-bf84-e2e73fe02b32/image.png">
<code>Component</code>에 명시적으로 <code>as</code>를 추가해주는 것이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/a31b302e-83c1-4dcc-b598-df7f93a555d5/image.png">
이제 <code>withRouter</code>는 제네릭을 잃지 않고도 내부 반환 컴포넌트에 속성을 추가할 수 있게 되었다. 
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. HOC
코드
리액트에서 자주 사용되는 HOC 패턴의 타입을 지정해보자!
여기 WrappedComponent가 있다. WrappedComponent는UnwrappedComponent와 withRouter의 컴포지션이다.
UnwrappedComponent 단순히 router와 id를 props로 받는다.
withRouter는 컴포넌트를 받아 router를 주입한 새로운 컴포넌트를 반환한다. 
문제
이제 WrappedComponent를 사용해보면 여기서 몇 가지 문제점이 발견된다. 
먼저 WrappedComponent는 router를 주입받기 때문에 props로 필요가 없는데도 불구하고 router를 props로 내려도 에러가 발생하지 않는다
그리고, UnwrappedComponent의 props 중 id는 string임에도 number 타입을 내려도 에러가 발생하지 않는다.
이러한 문제를 해결해보자. 
withRouter HOC 함수의 타입
HOC 함수에서 아우터 함수 (Component를 props로 받는)와 이너 함수(props를 props로 받는)의 타입을 각각 정해줘야 한다.
props 경우 제네릭이므로 TProps제네릭으로 만들고 Component는 그 제네릭한 props 를 인자로 받아 ReactNode를 반환한다.
TProps와 ReactNode 추가해준다. 
omit
그럼 타입스크립트는 router 타입이 필요하다는 추론을 해준다. 하지만, WrappedComponent의 경우 router props는 필요하지 않다. 
omit을 추가해주면 <Component/>에서 장황한 에러를 발생시킨다. 
즉, TProps가 router 프로퍼티를 포함한다는 것을 타입스크립트가 명시적으로 알지 못하기 때문에 발생한다. 
단계별로 살펴보면 Omit<TProps, "router">는 TProps에 router가 없는 경우 아무 작업도 하지 않는다.
그렇기 때문에 {...props} + router={router} 조합 시 TProps에 이미 router가 있을 수 있다고 타입스크립트는 판단하는 것이다. 
즉, 개발자가 as를 통해 타입을 강제해야 하는 상황이다.
이제 에러를 해결했다.
displayName
위 에러를 해결하기 위해서는 React.FC 혹은 ComponentType을 타입을 사용해야 한다. 
해결
이제 원하는대로 타입 체킹을 잘 해주게 된다. 
UnwrappedComponent의 경우 router 프롭스가 필요하다. 
WrappedComponent의 경우 router 프롭스가 없어도 된다.
props의 타입도 잘 체킹해준다. 
2. HOC with generic
코드
이제 아까 만든 withRouter를 사용해본다고 가정하자.
테이블 컴포넌트는 TableProps타입을 받아서 table을 렌더링한다.
1번 예제와 동일하게 withRouter로 맵핑해주고
이렇게 사용한다.
문제
역시나 문제가 생긴다. 
그냥 <Table/>를 사용했을 때 (1번 예시에서의 UnwrappedComponent같이 withRouter 없이) router를 HOC로 주입해주는데도 router가 필요하다는 타입 에러가 발생하고
row의 타입을 추론하지 못하는 것!
그럼 늘 그렇듯 해결에 나서보자 
구조적 타입 시스템의 한계
 
반환 타입으로 ComponentType을 사용한 이유는 displayName의 타입이 React.ReactNode에 없어서였다. 
하지만, 타입스크립트에서 함수에 속성을 추가하면 호출 시그니처 + 객체 속성의 교차 타입으로 추론한다. 
간단히 설명하자면
기존 함수 타입인 (props: TProps) => ReactElement 
displayName이라는 속성을 추가
{ (props: TProps): ReactElement; displayName: string } 객체 리터럴 타입으로 추론함
반환된 NewComponent는 함수 + displayName 속성을 가진 객체로 추론
여기서 객체 타입으로 추론되면서 TProps와 연결이 끊어지는 제네릭 컨텍스트 손실이 일어난다. 그래서 unknown으로 타입이 추론되는 것이다. 
이 로직 중에서 헷갈렸던 부분이 ComponentType에는 displayName 속성이 있는데 왜 합쳐서 객체로 추론해버릴까였다.
찾아보니 이는 구조적 타입 시스템의 한계라고 한다. 즉, 타입스크립트는 값의 형태에 타입을 의존하기 때문에 수동으로 속성을 추가하면 새로운 객체 타입으로 추론하면서 기존의 타입을 인식하지 못한다고 한다. (와 진짜 어렵네)
정리하자면 
타입스크립트의 구조적 타입 시스템 때문에 발생
타입스크립트는 값의 형태(Shape) 에 집중
함수에 속성이 추가되면 새로운 형태의 객체로 인식
이 과정에서 제네릭 타입 매개변수(TProps) 와의 연결이 유실
그럼 이제 Component의 타입을 ReactNode로 변경해준다.
그리고 withRouter의 타입을 확인해보면 unknown과 여전히 리턴 타입이 객체임을 확인할 수 있다. (제네릭이 소실된다)
해결
가장 간단한 방법은 as다
Component에 명시적으로 as를 추가해주는 것이다.
이제 withRouter는 제네릭을 잃지 않고도 내부 반환 컴포넌트에 속성을 추가할 수 있게 되었다. 
참고 : total typescript

Total Typescript - HOC

댓글