🟦[React] Todo List 짜보기

Todo List 짜보기

 

useImmer, filter 사용

import { useEffect } from "react";
import { useImmer } from "use-immer";

export default function TodoList(){
    const [todos, setTodos] = useImmer([
        { id: 1, text: '공부'},
        { id: 2, text: '운동'},
        { id: 3, text: '청소'},
    ]);
    const [inputText, setInputText] = useImmer('');

    function handleAdd(text){
        const lastId = todos.length > 0
            ? Math.max(...todos.map(todo => todo.id))
            : 0;

        setTodos(draft => {
            draft.push({
                id: lastId + 1,
                text
            });
        });

        setInputText('');
    }

    function handleDelete(id){
        setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
    }

    useEffect(() => {
        console.log(todos);
    }, [todos]);

    return(
        <>
            <h2>Todo List</h2>
            <div>
                <input
                    type="text"
                    placeholder="할 일 입력"
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                />
                <button onClick={() => handleAdd(inputText)}>추가</button>
            </div>
            <ul>
                {todos.map(data => (
                    <li key ={data.id}>
                        {data.text}
                        <button onClick={() => handleDelete(data.id)}>삭제</button>
                    </li>
                ))}
            </ul>
        </>
    )
};