[React TodoList] 컴포넌트 기능 구현하기 - 체크

컴포넌트 체크 기능 구현하기

 

onToggle 구현하기

onToggle이란 클래스명에 있으면 삭제, 없으면 추가하는 것이다.

 

 

App.js에서 todo 상태 사용하기

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

const App = () => {
  (...)
const onToggle = useCallback(
  id => {
    setTodos(
      todos.map(todo => 
        todo.id === id ? {...todo, checked:!todo.checked}:todo,)
    )
  },[todos]
)
  return (
  <TodoTemplate> 
      <TodoInsert onInsert={onInsert}/>
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
  </TodoTemplate>
  )
}

export default App;

 

TodolistItem.js

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

const TodoList = ({todos,onRemove,onToggle}) => {
  return (
    <div className='TodoList'>
      {todos.map(todo => (
         <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} onToggle={onToggle} /> 
      ))}  
    </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, onToggle }) => {
  const {id,text,checked} =todo;
  return (
    <div className='TodoListItem'>
      <div className={cn('checkbox',{checked})} onClick={()=>onToggle(id) >
        {checked? <MdOutlineCheckBox /> : <MdOutlineCheckBoxOutlineBlank />}
        <div className='text'>{text}</div>
      </div>
      <div className='remove' onClick={()=>onRemove(id)} >
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
};

export default TodoListItem;