2023-01-14: TypeScript 학습 (4)

TodoList의 기능을 좀 더 확장해보자.

이전 시간에는 Todo를 입력할 수 있는 Form과 입력한 내용들을 보여주는 List를 만들었다. 이제 이 TodoList의 기능을 강의 내용에 따라 좀 더 강화하는 시간을 가져보겠다.

1️⃣ Props Drilling을 이용한 삭제 기능 구현하기

이전 시간에 학습했던 내용을 참고하여 생성한 Todo를 삭제하는 기능을 만들어보자. 우선은 Todo를 삭제하려면 다음과 같은 절차를 생각해야한다.

생성한 TodoItem에 onClick 이벤트가 작동해야한다.
TodoItem을 누를 시, 새로고침이 되지 말아야한다. (preventDefault())
정상적으로 이벤트가 작동했다면 TodoItem의 Todo id를 체크해 동일한 id를 가진 Todo를 제외한 새로운 배열을 setTodos로 적용해줘야 한다.

위의 방식을 구현하기 위해, 앞서 onAddToDo를 구현한 방식과 비슷하게 Props Drilling으로 관련 내용을 아래와 같이 구현해봤다.

import { useState } from "react";
import NewTodo from "./components/NewTodo";
import Todos from "./components/Todos";
import Todo from "./models/todo";

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

  const addTodoHandler = (todoText: string) => {
    const newTodo = new Todo(todoText);

    setTodos([...todos, newTodo]);
  };

  const deleteTodoHandler = (todoId: string) => {
    setTodos(todos.filter((elem) => elem.id !== todoId));
  };

  return (
    <div className="App">
      <NewTodo onAddTodo={addTodoHandler} />
      <Todos items={todos} onDeleteTodo={deleteTodoHandler} />
    </div>
  );
}

export default App;

위의 코드에서 Todo를 추가하는 addTodoHandler와 같이 Todo를 지워주는 deleteTodoHandler 함수를 생성했다.

setState 함수인 setTodos를 통해 현재의 배열 todos에서 지우고자 하는 Todo와 동일한 id를 가진 요소를 지우기 위해 filter 메소드를 통해 새 배열로 만들어냈다.

앞서 class로 정의한 Todo에서 id는 string으로 정의했으므로, id를 가져올 매개변수인 todoId 또한 string으로 정의됐다.

이제 하위 컴포넌트인 Todos.tsx를 보자.

TodoList의 기능을 좀 더 확장해보자.

목차

1️⃣ Props Drilling을 이용한 삭제 기능 구현하기