React + Typescript (4) useState 사용하기

이번엔 타입스크립트 환경에서 useState를 사용해보겠다.

const [todos, setTodos] = useState([]);

해당 state는 초기값으로 빈 배열 갖고 이후 input으로 들어오는 텍스트를 담는 객체를 추가해줄 것이다.
이후 그 리스트를 화면에 렌더링할 것이다.

useState<>()

하지만 위 처럼 코드를 작성하면 에러가 발생한다.
역시 타입스크립트는 하나를 그냥 지나가지 않는다.
해당 state에 어떤 값들이 들어올지 리액트와 타입스크립트는 알 수 없기 때문에 타입을 명시해주자

const [todos, setTodos] = useState<Todo[]>([]);

Todo는 사전에 정의해둔 Class이다. 해당 Class 안에는 id와 text라는 인스턴스 변수가 존재한다.
이렇게 이 State는 Todo 타입의 객체들이 담긴 배열일거야~ 라고 알려주어야 한다!

ps+) type, class, interface 모두 타입스크립트에서 타입처럼 사용할 수 있다!!

전체 코드

import { useState } from "react";

import NewTodo from "./components/NewTodo";
import Todos from "./components/Todo";
import Todo from "./models/todo";

function App() {
    //                      > 이 state는 Todo타입의 배열을 관리한다고 명시
    const [todos, setTodos] = useState<Todo[]>([]);

    const addTodoHandler = (text: string) => {
        const newTodo = new Todo(text);
        setTodos((prev) => {
            return prev.concat(newTodo);
        });
    };

    return (
        <div>
            <NewTodo onAddTodo={addTodoHandler} />
            <Todos items={todos} />
        </div>
    );
}

export default App;