[TypeScript]나만 보는 TypeScript 기초 메모장(상태(state)에서 객체 형태로 저장, Map의 고유ID)

type Task = { id: number; name: string; };는 언제 필요할까?

이 type Task는 객체의 구조(타입)를 정의하는 역할.
즉, 어떤 변수가 어떤 속성을 가지고 있어야 하는지 강제하는 것.

tasks라는 상태(state)에서 각 할 일이 객체 형태로 저장.

 

ex) {[고유ID, 입력값, [고유ID(2), 입력값(2)]}

tasks 상태의 타입

const [tasks, setTasks] = useState<Task[]>([]);

• tasks는 할 일(Task) 객체들의 배열.
• 따라서, tasks 배열에 들어가는 모든 요소는 Task 타입을 따름

만약 type Task를 안 쓰면?

타입스크립트가 타입 검사를 제대로 못 함!

 

예를 들어, id 없이 tasks를 만든다면?

const newTask = { 
	name: input, 
    // id가 없음! 
    }; 
setTasks([...tasks, newTask]);

{tasks.map((task) => (
	<TodoItem task={task.name} />
))}

"id 속성이 없는데, tasks 배열에 추가하려고 헤서 오류 발생"

왜? 배열이 업데이트되면서 인덱스가 변경되면, 잘못된 요소가 삭제될 위험이 있음.

type Task가 꼭 필요한 순간

• tasks 배열이 객체들의 배열일 때.
• 객체가 항상 특정한 속성(id, name)을 가져야 할 때.
• 상태(state)에서 할 일의 구조를 명확하게 정의하고 싶을 때.