TIL | #15 React | TodoList 만들기 #2

2020-04-06(화)

TodoList #2

전에 작업하던 TodoList를 이어서, 삭제와 체크박스 토글 기능을 추가해 완성시킨다.

Remove, Toggle

// App.js
const onRemove = useCallback(
    (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
        setTodos((todos) => todos.filter((todo) => todo.id !== id));
    },
    [todos],
);
const onToggle = useCallback(
    (id) => {
        setTodos((todos) =>
            todos.map((todo) =>
                todo.id === id ? { 
          	...todo, 
        	  checked: !todo.checked 
        	} : todo,
            ),
        );
    },
    [todos],
);

return (
        <TodoTemplate>
            <TodoInsert onInsert={onInsert} />
            {/* TodoList props로 전달 -> TodoList에서 이 값을 받아온 후 
						TodoListItem으로 변환하여 렌더링 하도록 설정한다.*/}
            <TodoList 
							todos={todos} 
							onRemove={onRemove} 
							onToggle={onToggle} />
        </TodoTemplate>
    );

// TodoList.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 cn from 'classnames';
import './TodoListItem.scss';
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline,
} from 'react-icons/md';

const TodoListItem = ({ todo, onRemove, onToggle, style }) => {
    const { id, text, checked } = todo;

    return (
        <div className="TodoListItem">
            <div
                className={cn('checkbox', { checked })}
                onClick={() => onToggle(id)}
            >
                {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
                <div className="text">{text}</div>
            </div>
            <div className="remove" onClick={() => onRemove(id)}>
                <MdRemoveCircleOutline />
            </div>
        </div>
    );
};

export default TodoListItem;