[ts] uuid와 함께 아이템 추가하기 (@types/uuid도 추가해준다)

최상위 컴포넌트인 App.tsx 에는 내가 보여줄 TodoList 컴포넌트를 보여주고 있다.

import TodoList from './componets/TodoList/TodoList';

function App() {
  return (
    <>
      <TodoList />
    </>
  );
}

export default App;

App.tsx는 메인 화면처럼 보여줄 제일 큰 메인 컴포넌트를 불러온다.

TodoList.tsx 에는 이제 본격적으로 투두리스트를 보여줄 컴포넌트다.

• todos 라는 상태값으로 보여줄 할일 목록 state를 그룹화하여 담아둔다.
• 화면단에 초기값으로 보여줄 목록을 넣어도 된다.

import { useState } from 'react';
import AddTodo from '../AddTodo/AddTodo';
import { v4 as uuidv4 } from 'uuid';

type Todo = {
  id: string;
  text: string;
  status: 'active' | 'completed';
};

const TodoList = () => {
  const [todos, setTodos] = useState<Todo[]>([
    { id: uuidv4(), text: '코어 자바스크립트 3장 읽기', status: 'active' },
    { id: uuidv4(), text: '복싱 가기', status: 'active' },
  ]);

  const handleAdd = (text: string) => {
    const newTodo: Todo = {
      id: uuidv4(),
      text: text,
      status: 'active',
    };

    setTodos((prevTodos) => [...prevTodos, newTodo]);
  };

  return (
    <section>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <AddTodo onAdd={handleAdd} />
    </section>
  );
};

export default TodoList;

uuid의 경우 typescript를 사용해서 @types/uuid 타입 정의도 설치해야한다.

type 파일의 경우 빌드시엔 필요 없어서 devDependecy에 추가한다.

bun add -d @types/uuid

bun add 설치할 패키지 이름 -d 또는 bun add 설치할 패키지 이름 —dev 로 설치하면 됨

걍 간단한 전자로 설치한다.