TypeScript를 이용해 React에서 Todo를 구현해보자.

강의 내용에 따라 TypeScript가 포함된 CRA를 설치해보고, 컴포넌트도 만들어보고 이제 props에 타입을 설정해보는 것도 배웠다.

이번 시간에는 이전에 배운 내용들을 기반으로 강의 내용에 따라 TodoList를 계속해서 만들어보도록 하겠다.

목차

1️⃣ li 요소를 하위 컴포넌트로 분리하기

2️⃣ 이벤트 객체의 타입 정의

3️⃣ HTML 요소의 타입 지정 및 !과 ? 연산자

4️⃣ 함수 타입을 정의하기

5️⃣ TypeScript에서 useState의 사용

1️⃣ li 요소를 하위 컴포넌트로 분리하기

이전에 작성한 코드를 보면 아래와 같이 li 요소를 통해 Todo의 내용들을 출력하고 있다.

import React from "react";
import Todo from "../models/todo";

const Todos: React.FC<{ items: ***Todo[]*** }> = (props) => {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
};

export default Todos;

이제 이 li 요소를 하위 컴포넌트로 만들어 받아온 Todo의 내용을 출력해보고자 한다. 출력해볼 수 있는 방법은 **Todo의 속성들을 배치해서 넘기는 방법과 **Todo 자체를 넘겨서 컴포넌트 내부에서 속성들을 배치하는 방법이 있다.

우선은 **Todo의 속성들을 배치해서 넘기는 방법**이다. 이 내용은 위와 크게 다르지 않다. 먼저 li를 담고 있는 하위 컴포넌트인 TodoItem부터 살펴보자.

import React from "react";
import Todo from "./todo";

const TodoItem: React.FC<{ **text: string** }> = (props) => {
  return <li>{**props.text**}</li>;
};

export default TodoItem;

위와 같이 Todo의 속성들을 받아온다면, 받아올 속성들의 타입을 지정해주도록 한다. 이렇게 만든 TodoItem 컴포넌트를 아래의 Todos 컴포넌트에 배치해 보내줄 prop들을 추가해주자.

import React from "react";
import Todo from "../models/todo";
import TodoItem from "../models/todoitem";

const Todos: React.FC<{ items: Todo[] }> = (props) => {
  return (
    <ul>
      {props.items.map((item) => (
	      <TodoItem key={item.id} text={item.text} />
      ))}
    </ul>
  );
};

export default Todos;