[React TodoList] 컴포넌트 기능 구현하기 - 삭제

컴포넌트 삭제 기능 구현하기

 

배열 내장 함수 filter 사용

const array = [1,2,3,4,5,6,7] 

console.log(array.filter(v=>v>3))
//[4,5,6,7]

 

App.js에서 todo 배열에서 id로 항목 지우기

import React , { useState, useCallback } from "react";
import TodoTemplate from "./TodoTemplate";
import TodoInsert from "./TodoInsert";
import TodoList from "./TodoList";

const App = () => {
  (...)
  const onRemove = useCallback(
	 id => {
  	setTodos(todos.filter(todo=>todo.id !== id))
  },[todos] 
)


  return (
  <TodoTemplate> 
      <TodoInsert />
      <TodoList todos={todos} onRemove ={onRemove} />
  </TodoTemplate>
  )
}

export default App;

 

Todolist.js

import React from 'react';
import TodoListItem  from './TodoListItem';
import './TodoList.scss'

const TodoList = ({todos,onRemove}) => {
  return (
    <div className='TodoList'>
      {todos.map(todo => (
         <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} /> 
      ))}  
    </div>
  );
};

export default TodoList;

 

 

todoListItem.js

import React from 'react';
import { 
  MdOutlineCheckBoxOutlineBlank,
  MdOutlineCheckBox,
  MdRemoveCircleOutline } from "react-icons/md";
import cn from 'classnames'
import './TodoListItem.scss'


const TodoListItem = ({todo, onRemove}) => {
  const {id,text,checked} =todo;
  return (
    <div className='TodoListItem'>
      <div className={cn('checkbox',{checked})} >
        {checked? <MdOutlineCheckBox /> : <MdOutlineCheckBoxOutlineBlank />}
        <div className='text'>{text}</div>
      </div>
      <div className='remove' onClick={()=> onRemove(id)}>
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;