<div id="readability-page-1" class="page"><cite>DarrenKwonDev</cite>
 2021. 11. 27. 11:39
 <div>
 다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자.
<pre id="code_1637979327888" data-ke-language="javascript" data-ke-type="codeblock"><code>import { useState, useCallback } from 'react'

const useToggle = (initialState: boolean) =&gt; {
 const [state, setState] = useState(initialState)
 const toggle = useCallback(() =&gt; {
 setState((state) =&gt; !state)
 }, [])

 const open = useCallback(() =&gt; setState(true), [])
 const close = useCallback(() =&gt; setState(false), [])

 return [state, open, close, toggle]
}

export default useToggle</code></pre>

위와 같은 코드에서 [state, open, close, toggle]이 추론되는 걸로는 (boolean&nbsp;|&nbsp;(()&nbsp;=&gt;&nbsp;void))[] 과 같이 추론된다.
즉, 저 배열이 boolean 혹은 () =&gt; void 꼴의 함수를 원소로 가진 지닌 배열로 인식하는 것이다.
따라서 저 커스텀 훅을 사용하는 곳에서 아래와 같이 타이핑이 들어간다.
<pre id="code_1637979521034" data-ke-language="javascript" data-ke-type="codeblock"><code>const [showDocuments, , , ] = useToggle(hasCurrentDocument

&lt;OtherLibraryProject
 showDocuments={showDocuments} // boolean이 아닌 boolean | (() =&gt; void) 라고 추론됨
 ...props 
/&gt;</code></pre>

이를 해결하기 위해서는 배열을 반환하는 커스텀 훅에서 as const를 붙여 반환해주면 된다.
<pre id="code_1637979615944" data-ke-language="javascript" data-ke-type="codeblock"><code>const useToggle = (initialState: boolean) =&gt; {
 // ...omitted
 
 return [state, open, close, toggle] as const
}</code></pre>
이제 이렇게 올바르게 추론된다. readonly [boolean, () =&gt; void, () =&gt; void, () =&gt; void]

<h4 data-ke-size="size20">as const를 왜 씀?</h4>
as string이 string으로 type assertion하듯, as const도 상수로 type assertion한다고 생각하면 쉽다.
그래서 이름도 const assertion이다.

javascript에서 배열이나 객체는 const로 선언하더라도 내부 값을 변환시킬 수 있었으나, as const로 const assertion을 하게 되면 readonly가 붙어 내부 변환을 할 수 있다. 즉 정말로 말그대로 '상수'처럼 취급되는 것이다.&nbsp;
<pre id="code_1637980545216" data-ke-language="javascript" data-ke-type="codeblock"><code>const a = [1, 2, 3];
a[2] = 100;

const b = [1, 2, 3] as const; // readonly [1, 2, 3]
b[2] = 100; // Cannot assign to '2' because it is a read-only property.</code></pre>

좀 더 자세한 내용은 아래를 참고하자.
<a href="https://darrengwon.tistory.com/1130?category=867626">https://darrengwon.tistory.com/1130?category=867626</a>&nbsp;
<figure id="og_1637980474757" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="literal type과 const assertion" data-og-description="literal type literal type은 간단히, 특정 값을 타입으로 고정시키는 것이다. 물론 특정 값을 type 선언해서 사용할 수도 있긴 하다. deprecated라고 뜰 뿐이지... type name = 'Darren' const me: 'Darren' = 'D.." data-og-host="darrengwon.tistory.com" data-og-source-url="https://darrengwon.tistory.com/1130?category=867626" data-og-url="https://darrengwon.tistory.com/1130" data-og-image="https://scrap.kakaocdn.net/dn/bpzyHF/hyMuIyhHap/CC8hYj8hywIiHGwf2Antx1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/2y4nl/hyMuFnZKMg/7klKTs5Zk6xCmIbk1gLR4k/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/rlXdo/hyMuzVB4Qx/7rNhEWjJ1FcfhoSEef9j0k/img.jpg?width=460&amp;height=460&amp;face=0_0_460_460"><a href="https://darrengwon.tistory.com/1130?category=867626" target="_blank" rel="noopener" data-source-url="https://darrengwon.tistory.com/1130?category=867626">

<div>
literal type과 const assertion
literal type literal type은 간단히, 특정 값을 타입으로 고정시키는 것이다. 물론 특정 값을 type 선언해서 사용할 수도 있긴 하다. deprecated라고 뜰 뿐이지... type name = 'Darren' const me: 'Darren' = 'D..
darrengwon.tistory.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bpzyHF/hyMuIyhHap/CC8hYj8hywIiHGwf2Antx1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/2y4nl/hyMuFnZKMg/7klKTs5Zk6xCmIbk1gLR4k/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/rlXdo/hyMuzVB4Qx/7rNhEWjJ1FcfhoSEef9j0k/img.jpg?width=460&amp;height=460&amp;face=0_0_460_460"></figure>

 
 
 </div></div>

HotHandCoding

DarrenKwon

다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자.
import { useState, useCallback } from 'react'
const useToggle = (initialState: boolean) => {
 const [state, setState] = useState(initialState)
 const toggle = useCallback(() => {
 setState((state) => !state)
 }, [])
 const open = useCallback(() => setState(true), [])
 const close = useCallback(() => setState(false), [])
 return [state, open, close, toggle]
}
export default useToggle
 
위와 같은 코드에서 [state, open, close, toggle]이 추론되는 걸로는 (boolean | (() => void))[] 과 같이 추론된다.
즉, 저 배열이 boolean 혹은 () => void 꼴의 함수를 원소로 가진 지닌 배열로 인식하는 것이다.
따라서 저 커스텀 훅을 사용하는 곳에서 아래와 같이 타이핑이 들어간다.
const [showDocuments, , , ] = useToggle(hasCurrentDocument
<OtherLibraryProject
 showDocuments={showDocuments} // boolean이 아닌 boolean | (() => void) 라고 추론됨
 ...props 
/>
 
이를 해결하기 위해서는 배열을 반환하는 커스텀 훅에서 as const를 붙여 반환해주면 된다.
const useToggle = (initialState: boolean) => {
 // ...omitted
 
 return [state, open, close, toggle] as const
}
이제 이렇게 올바르게 추론된다. readonly [boolean, () => void, () => void, () => void]
 
as const를 왜 씀?
as string이 string으로 type assertion하듯, as const도 상수로 type assertion한다고 생각하면 쉽다.
그래서 이름도 const assertion이다.
 
javascript에서 배열이나 객체는 const로 선언하더라도 내부 값을 변환시킬 수 있었으나, as const로 const assertion을 하게 되면 readonly가 붙어 내부 변환을 할 수 있다. 즉 정말로 말그대로 '상수'처럼 취급되는 것이다. 
const a = [1, 2, 3];
a[2] = 100;
const b = [1, 2, 3] as const; // readonly [1, 2, 3]
b[2] = 100; // Cannot assign to '2' because it is a read-only property.
 
좀 더 자세한 내용은 아래를 참고하자.
https://darrengwon.tistory.com/1130?category=867626

custom hook에서 배열을 반환하는 경우의 타이핑

댓글