10.3.3.2 todos 배열에서 id로 항목 지우기

    방금 배운 filter 함수를 사용하여 onRemove 함수를 작성해 보겠습니다. App 컴포넌트에 id를 파라미터로 받아 와서 같은 id를 가진 항목을 todos 배열에서 지우는 함수입니다. 이 함수를 만들고 나서 TodoList의 props로 설정해 주세요.

    App.js

    import React, { useState, useRef, useCallback } from 'react';
    import TodoTemplate from './components/TodoTemplate';
    import TodoInsert from './components/TodoInsert';
    import TodoList from './components/TodoList';
     
    const App = () => {
      (...)
     
      const onRemove = useCallback(
        id => {
          setTodos(todos.filter(todo => todo.id != = id));
        },
        [todos],
      );
     
      return (
        <TodoTemplate>
          <TodoInsert onInsert={onInsert} />
          <TodoList todos={todos} onRemove={onRemove} />
        </TodoTemplate>
      );
    };
     
    export default App;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.