<div id="readability-page-1" class="page"><div><h3 id="1-reactjsx">1. React.JSX</h3>
리액트 엘리먼트의 타입을 지정할 때 자주 쓰이는 3가지 타입이다. 
아래 타입들 쓸 때마다 헷갈렸는데(<code>ReactNode</code>가 다 포함해서 <code>ReactNode</code>를 썼다) 3가지 타입에 대해 알아보자
<img src="https://velog.velcdn.com/images/dongha1992/post/53f7a12e-23fc-4d8e-893c-64e0fe60ef11/image.png">
먼저 <code> JSX.Element</code>다. <code> Element</code>을 타고 <code>index.d.ts</code> 파일로 가보면 <code>Element</code>의 타입이 지정되어 있는 것을 볼 수 있다. 
여기서 재밌는 점은 <code>Element</code>가 <code>ReactElement</code>로 확장되어 있다는 것
<img src="https://velog.velcdn.com/images/dongha1992/post/e2689328-45cc-44bb-a5ab-bc3e7eedf8c0/image.png">
즉, 아래와 같이 <code>JSX.Element</code>와 <code>React.ReactElement</code>는 같은 타입을 바라보고 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/efaa4ee8-2234-4b0d-8575-dc2eb8a8ebd4/image.png">
그럼 <code>ReactNode</code>를 보자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/144a79a9-840f-4cfb-9250-d5c067b37f52/image.png">
<code>ReactNode</code>는 대부분의 타입을 커버한다. <code>ReactElement</code>까지 포함하는 것을 확인할 수 있다.
이제 아래와 같이 평범한 컴포넌트를 확인해보자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/93bebeab-2ed1-4d56-bc75-18ababc4826e/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/4a773a8d-5f15-40a6-9aa1-a321721758ec/image.png">
타입스크립트는 리턴 타입을 <code>JSX.Element</code>로 추론한다. 
그렇담 <code>JSX</code>의 타입은 무엇인가. <code>React</code>이 <code>namespace</code>를 살펴보자. <code>index.d.ts</code>에 들어가보면 <code>namespace React</code>가 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/9aa1abfb-3bc9-41b2-a4e7-8388b815cdcb/image.png">
그리고 대략 4천줄 쯤에 <code>JSX</code>가 있는데, 이 <code>namespace</code>안에 <code>Element</code>가 또 있다! 
<img src="https://velog.velcdn.com/images/dongha1992/post/e40af75b-5e99-4d05-8eb0-32b7dfd25f4f/image.png">
<code>Element</code>는 <code>GlobalJSXElement</code>라는 타입을 확장하고, <code>GlobalJSXElement</code> 가 뭔지 타고 들어가보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/eaefabb6-ee0c-4fa2-86aa-f689ddb062b2/image.png">
그런데 <code>GlobalJSXElement</code>는 다시 <code>JSX.Element</code>를 확장하고 있다.(순환참조아녀?)
아무튼 정리하자면 <code>React.JSX.Element</code>는 결국 <code>JSX.Element</code>와 같음을 알 수 있다. 
이제 다음 컴포넌트를 보자. 리턴 타입이 <code>ReactNode</code>인 컴포넌트는 대부분의 타입을 포함하기 때문에 아래처럼 <code>string</code>을 리턴해도 컴파일 에러가 나지 않는다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/09a02b88-13a5-458b-850e-ef2f697ea3af/image.png">
그리고 마지막으로 리턴 타입이 <code>ReactElement</code>인 경우를 보면 앞서 말했든 <code>JSX.Element</code>와 <code>ReactElement</code>은 같기 때문에 <code>ReactElement</code>도 오직 <code>JSX</code>만 리턴할 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/642cda97-8853-42ae-a15e-7457bc609b01/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/3123b044-e3cf-4552-9df8-935744f13ef0/image.png">
결론은 <code>JSX.Element</code>와 <code>ReactElement</code> 같고 <code>ReactNode</code>는 더 넓은 타입이다. 
<h3 id="2-forcing-type-with-children">2. forcing type with children</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/a2156783-f9c5-4136-884d-2ca9181561d6/image.png">
흔히 사용하는 <code>Select</code>와 <code>Option</code> 컴포넌트다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ab52b0d4-3f1c-41da-82c5-82a21653ab10/image.png">
<code>Option</code>은 <code>OptionType</code> 타입을 강제하고 있다. 
<code>OptionType</code>에는 <a href="https://thebook.io/080369/0279/"><code>__brand</code></a>라는 프로퍼티가 있는데, <code>__brand</code> 는 간단하게 말해 개발자가 지정한 타입 외 다른 타입의 호환을 막는 역할을 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/649778aa-1eff-43a8-a629-e500f481ec80/image.png">
하지만, 이렇게 만든 <code>Select</code>과 <code>Option</code> 을 사용하려고 하면 에러가 나온다
<img src="https://velog.velcdn.com/images/dongha1992/post/2fc89a90-fda9-4d46-9cd6-8ab004ea8635/image.png">
<code>as OptionType</code> 으로 타입을 강제했음에도 <code>Option</code> 컴포넌트가 <code>ReactElement</code> 타입을 반환하여 타입이 불일치 한다는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/72bb51bd-fd40-466d-b141-667476932395/image.png">
언뜻 보기에 <code>OptionType</code> 잘 반환하는 거 같은데 뭐가 문제일까?
먼저, <code>&lt;Option&gt;</code> 컴포넌트를 변수에 할당해보자
<img src="https://velog.velcdn.com/images/dongha1992/post/d45c146c-18fd-4852-bd08-bbda394b2db7/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/9546f490-541f-4f59-84d3-f7a05a79cae3/image.png">
할당된 변수의 타입은 <code>JSX.Element</code>로 나오고 있다. 즉, 제대로 추론을 못하고 있다는 뜻
하지만 컴포넌트가 아닌 함수로 호출하게 되면 제대로 타입을 추론한다.
<img src="https://velog.velcdn.com/images/dongha1992/post/78d0357e-3bd2-4521-a8d2-a29d91272b5f/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/33671727-858b-4c94-8aa0-812e696a8e6e/image.png">
그래서 문제를 해결할 수 있는 방법은 컴포넌트를 함수로 호출하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ceecdebd-ea05-40aa-83d2-d6cb30959bc8/image.png">
하지만 JSX 엘리먼트를 함수로 호출하는 건 아주 잘못된 행동이다. 
리액트가 컴포넌트 인스턴스로 인식하지 못하여 Reconciliation를 수행하지 못하기 때문에 매번 호출해버린다.
아쉽게도 <code>children</code> props에 강제로 타입을 지정하는 방법은 없다. 
리액트는 모든 JSX 요소를 <code>JSX.Element</code>로 추론하며, 커스텀 타입을 무시하기 때문!
참고 : <a href="https://www.totaltypescript.com/">total typescript</a></div></div>

삶도 재입학이 되나요?

1. React.JSX
리액트 엘리먼트의 타입을 지정할 때 자주 쓰이는 3가지 타입이다. 
아래 타입들 쓸 때마다 헷갈렸는데(ReactNode가 다 포함해서 ReactNode를 썼다) 3가지 타입에 대해 알아보자
먼저 JSX.Element다. Element을 타고 index.d.ts 파일로 가보면 Element의 타입이 지정되어 있는 것을 볼 수 있다. 
여기서 재밌는 점은 Element가 ReactElement로 확장되어 있다는 것
즉, 아래와 같이 JSX.Element와 React.ReactElement는 같은 타입을 바라보고 있다.
그럼 ReactNode를 보자. 
ReactNode는 대부분의 타입을 커버한다. ReactElement까지 포함하는 것을 확인할 수 있다.
이제 아래와 같이 평범한 컴포넌트를 확인해보자. 
타입스크립트는 리턴 타입을 JSX.Element로 추론한다. 
그렇담 JSX의 타입은 무엇인가. React이 namespace를 살펴보자. index.d.ts에 들어가보면 namespace React가 있다. 
그리고 대략 4천줄 쯤에 JSX가 있는데, 이 namespace안에 Element가 또 있다! 
Element는 GlobalJSXElement라는 타입을 확장하고, GlobalJSXElement 가 뭔지 타고 들어가보면 
그런데 GlobalJSXElement는 다시 JSX.Element를 확장하고 있다.(순환참조아녀?)
*아무튼 정리하자면 React.JSX.Element는 결국 JSX.Element와 같음을 알 수 있다. *
이제 다음 컴포넌트를 보자. 리턴 타입이 ReactNode인 컴포넌트는 대부분의 타입을 포함하기 때문에 아래처럼 string을 리턴해도 컴파일 에러가 나지 않는다. 
그리고 마지막으로 리턴 타입이 ReactElement인 경우를 보면 앞서 말했든 JSX.Element와 ReactElement은 같기 때문에 ReactElement도 오직 JSX만 리턴할 수 있다. 
결론은 JSX.Element와 ReactElement 같고 ReactNode는 더 넓은 타입이다. 
2. forcing type with children
흔히 사용하는 Select와 Option 컴포넌트다. 
Option은 OptionType 타입을 강제하고 있다. 
OptionType에는 __brand라는 프로퍼티가 있는데, __brand 는 간단하게 말해 개발자가 지정한 타입 외 다른 타입의 호환을 막는 역할을 한다. 
하지만, 이렇게 만든 Select과 Option 을 사용하려고 하면 에러가 나온다
as OptionType 으로 타입을 강제했음에도 Option 컴포넌트가 ReactElement 타입을 반환하여 타입이 불일치 한다는 것이다. 
언뜻 보기에 OptionType 잘 반환하는 거 같은데 뭐가 문제일까?
먼저, <Option> 컴포넌트를 변수에 할당해보자
할당된 변수의 타입은 JSX.Element로 나오고 있다. 즉, 제대로 추론을 못하고 있다는 뜻
하지만 컴포넌트가 아닌 함수로 호출하게 되면 제대로 타입을 추론한다.
그래서 문제를 해결할 수 있는 방법은 컴포넌트를 함수로 호출하는 것이다. 
하지만 JSX 엘리먼트를 함수로 호출하는 건 아주 잘못된 행동이다. 
리액트가 컴포넌트 인스턴스로 인식하지 못하여 Reconciliation를 수행하지 못하기 때문에 매번 호출해버린다.
아쉽게도 children props에 강제로 타입을 지정하는 방법은 없다. 
리액트는 모든 JSX 요소를 JSX.Element로 추론하며, 커스텀 타입을 무시하기 때문!
참고 : total typescript

Total Typescript - JSX.Element

댓글