Toy project (TS) : Todo List 2

App.tsx

import React, { useState } from 'react';
import { TodoList } from './components/Todolist';
import {Todo , HandleTodo} from './types'

const dummyTodos : Array<Todo> = [{text : "pop a pill ", complete : true}, {text : "eat dinner ", complete : false}]

const App : React.FC = () => {
  const [todos , setTodos] = useState(dummyTodos);
  
  const handleTodo : HandleTodo = selectedTodo =>{
    const newTodos = todos.map((todo) =>{
      if (todo === selectedTodo)
      {
        return { ...todo, complete: !todo.complete }
      }
      return todo;
    });
    setTodos(newTodos)
  }
  return (
    <>
      <TodoList todos={todos} handleTodo = {handleTodo}/>
    </>
  );
}

export default App;

handleTodo 함수를 통해서 선택을 하면 해당 항목의 comlete가 반전 되도록 함.
함수를 새로 만들 때도 type을 지정해 줘야하기 때문에 HandleTodo 타입을 추가로 선언해줘야함.

export type HandleTodo = (handleTodo : Todo) => void;

함수의 타입 선언

함수 타입의 값에 타입 표기를 붙이기 위해서는 화살표 함수 정의 문법과 비슷한 문법을 사용한다.
(...매개변수 나열) => 반환 타입 형태로 적어주게 되는데 예를 들어
type yetAnotherSum = (a: number, b: number) => number이렇게 할 수 있고 만약에 반환 값이 없다면
export type HandleTodo = (handleTodo : Todo) => void;
처럼 void를 넣으면 된다.

TodoList.tsx

TodoList 컴포넌트를 따로 만들고 todos에 들어있는 데이터의 수만큼 리스트를 반환한다.

import { TodoItemCard } from './TodoItemCard';
interface TodoListProps {
    todos : Array<Todo>,
    handleTodo : HandleTodo;
}
export const TodoList : React.FC <TodoListProps> = ({ todos , handleTodo }) => {
    return <ul>
        {
            todos.map ((todo) =>{
                return <TodoItemCard key={todo.text} todo={todo} handleTodo= {handleTodo}/>
            })
        }
    </ul>
}

결과

반디캠에 가렸지만... 저렇게 이제 마우스 클릭이 작동하게 된다. 이제 input을 통해 동적으로 todo 데이터를 추가해보도록 하겠다.