useState 적절하게 타입정의하기
이제 React의 가장 중요한 훅 중 하나인 useState
를 살펴보겠습니다.
UI에 태그를 추가하는 데 사용되는 Tags
컴포넌트를 생각해 봅시다.
export const Tags = () => {
const [tags, setTags] = useState([]);
return (
<div>
{tags.map((tag) => {
return <div key={tag.id}>{tag.value}</div>;
})}
...
상태에는 tags
와 setTags
가 있고, setState
는 빈 배열로 시작합니다.
그런 다음 각 태그에 대해 그 위에 매핑하고 tag.id
키와 태그 값을 가진 div
를 반환할 것이며, 이것이 UI에 표시되는 내용이 될 것입니다.
컴포넌트에는 클릭하면 배열 끝에 새 태그가 추가되는 버튼이 있습니다.
새 태그를 전달하는 것과 함께 기존 태그를 여러 개 전달하는 setTags
호출이 있습니다.
...
<button
onClick={() => {
// error inside of setTags
setTags([
...tags,
{
id: new Date().getTime(),
value: "New",
},
]);
}}
>
Add Tag
</button>
</div>
);
};
하지만 현재 setTags
호출 내부에 오류가 있습니다.
문제는 tags 변수가 never 배열로 타입정의 되었다는 것입니다. useState
위로 마우스를 가져가면 빈 배열을 never
배열로 추론하기 때문에 never
배열로 추론되고 있음을 알 수 있습니다.
// hovering over `useState`
const [tags, setTags] = useState([]);
// shows
(alias) useState<never[]>
컴포넌트 내부에서 태그가 전혀 작동하지 않습니다. 즉 tag.id
, tag.value
에 대한 추론이 이루어지지 않으며 여기서 setTags
를 사용할 수 없습니다.
여러분의 과제는 이 useState
가 숫자타입의 id
와 문자열의 value
를 가진 객체 배열로 타입정의되어 있다는 것을 어떻게 이해하게 할 수 있는지 알아내는 것입니다.