<div id="readability-page-1" class="page"><div><h3 id="1-lazy-load-type-pattern">1. Lazy load type pattern</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/aecb5b48-1f81-43fc-b4cd-283177705171/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/ca6f3649-99d3-4883-bc89-7804fb7cc22b/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/f83c1df9-8ebc-48e3-89ec-e7c09107a660/image.png">
흔히 볼 수 있는 컴포넌트를 lazy loading 하는 컴포넌트다. 
여기서 <code>fake-external-component</code>라는 컴포넌트를 로드할 건데, <code>fake-external-component</code>는 아래 컴포넌트가 있는 특정 모듈 파일이라고 가정하자.
<img src="https://velog.velcdn.com/images/dongha1992/post/24d081bb-552d-4332-8153-5a1418d39a3d/image.png">
필수값 id를 props로 받는 컴포넌트다. 
그렇다면 이제 문제는 <code>&lt;LazyLoad /&gt;</code> 를 호출했을 때, 정확한 props를 작성했음에도 타입 에러가 나는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2a28ad67-678e-46e3-a11b-86ce5bcd5681/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/d9f75994-75d4-4b6c-934b-359eb544e0ee/image.png">
이 부분의 문제일 가능성이 농후하다. 리액트에서 제공하는 <code>lazy</code>의 타입 데피니션을 살펴보자.
<img src="https://velog.velcdn.com/images/dongha1992/post/5ddc4c2f-7bbc-4d78-8a83-dcce484f682e/image.png">
lazy는 <code>ComponetType</code>을 확장한 것을 알 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/2cdd91bb-623d-4b44-b540-2c7932353b48/image.png">
즉, lazy에 인자로 들어가는 <code>loader</code>의 타입을 촵촵해서 변경해야 하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/6f4b3826-31c8-452c-9f89-c8c2d45f8504/image.png">
lazy의 타입 데피니션에서 봤던 것처럼 loader 타입을 변경했다.
그럼 요상한 에러가 나온다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/7fb4e4b9-4428-4a6a-8596-50b45d411e7e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/a8f8cd32-76f5-484a-838a-59eed27c9e70/image.png">
위 에러는 <code>fake-external-component</code>가 컴포넌트가 아니라서 나오는 에러다. 즉, 전체 모듈을 가져온 것이지 (export default) 컴포넌트가 아니기 때문에 에러 나온 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/07bc891d-2c07-4a9b-9a2e-3704abec1dfd/image.png">
이제 동적으로 props 타입을 받아야 하기 때문에 <code>Props</code>를 제네릭으로 만든다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/b5db4af4-b68a-4009-80cb-c0860235180b/image.png">
<code>&lt;C extends ComponentType&lt;any&gt;&gt;</code> 로 타입을 확장하면서 <code>C</code>가 리액트 컴포넌트임을 알려주고, <code>ComponentType</code>로 Props를 추론할 수 있게 된다. 
이제 <code>LazyLoad</code> 함수를 살펴보면 <code>LazyComponent</code>에러가 나는 것을 볼 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/8e6e483f-3b41-4089-b39c-47c2714229e4/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/6d0fd1a4-45d4-489a-a862-b858cee26904/image.png">
뭔가 어려운 내용의 에러인데, 요약하자면 LazyComponent에 전달할 props 타입이 정의되지 않았다는 것이다. 
<code>loader</code>만 정의하고 <code>props</code>에 대해선 타입을 정의하지 않았기 때문에 <code>ComponentProps</code>를 이용해 타입도 정의해줘야 한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/19a67efc-fc25-46ed-80b0-48fabdf4efa7/image.png">
이제 필수값인 <code>id</code>를 props에서 제거해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/91cceb00-284b-4bc9-8813-009688afc920/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/bdfaab05-5c91-4548-ad0c-9eb000acba9b/image.png">
컴파일 에러가 잘 나온다.
만약 로드하는 컴포넌트에 새로운 props를 추가하면, (<code>name</code>을 추가함)
<img src="https://velog.velcdn.com/images/dongha1992/post/a3740b39-5091-44c3-87da-9bb0ab755ef4/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/dbb5e533-91d3-41eb-8287-95f17d9adafd/image.png">
사용처에서 자동완성을 찾을 수 있다. <code>ComponentProps</code>가 타입을 추론하기 때문!
참고: <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. Lazy load type pattern
흔히 볼 수 있는 컴포넌트를 lazy loading 하는 컴포넌트다. 
여기서 fake-external-component라는 컴포넌트를 로드할 건데, fake-external-component는 아래 컴포넌트가 있는 특정 모듈 파일이라고 가정하자.
필수값 id를 props로 받는 컴포넌트다. 
그렇다면 이제 문제는 <LazyLoad /> 를 호출했을 때, 정확한 props를 작성했음에도 타입 에러가 나는 것이다. 
이 부분의 문제일 가능성이 농후하다. 리액트에서 제공하는 lazy의 타입 데피니션을 살펴보자.
lazy는 ComponetType을 확장한 것을 알 수 있다. 
즉, lazy에 인자로 들어가는 loader의 타입을 촵촵해서 변경해야 하는 것이다. 
lazy의 타입 데피니션에서 봤던 것처럼 loader 타입을 변경했다.
그럼 요상한 에러가 나온다. 
위 에러는 fake-external-component가 컴포넌트가 아니라서 나오는 에러다. 즉, 전체 모듈을 가져온 것이지 (export default) 컴포넌트가 아니기 때문에 에러 나온 것이다. 
이제 동적으로 props 타입을 받아야 하기 때문에 Props를 제네릭으로 만든다. 
<C extends ComponentType<any>> 로 타입을 확장하면서 C가 리액트 컴포넌트임을 알려주고, ComponentType로 Props를 추론할 수 있게 된다. 
이제 LazyLoad 함수를 살펴보면 LazyComponent에러가 나는 것을 볼 수 있다.
뭔가 어려운 내용의 에러인데, 요약하자면 LazyComponent에 전달할 props 타입이 정의되지 않았다는 것이다. 
loader만 정의하고 props에 대해선 타입을 정의하지 않았기 때문에 ComponentProps를 이용해 타입도 정의해줘야 한다.
이제 필수값인 id를 props에서 제거해보면
컴파일 에러가 잘 나온다.
만약 로드하는 컴포넌트에 새로운 props를 추가하면, (name을 추가함)
사용처에서 자동완성을 찾을 수 있다. ComponentProps가 타입을 추론하기 때문!
참고: total typescript

Total Typescript - Advanced pattern (1)

댓글