더북(TheBook)

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;

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