React - 할 일 폼 만들기(6)_삭제, 수정, 커스텀 Hook

• 삭제 기능

const removeTodo = (id) => {
    const newTodos = todos.filter(todo => todo.id != id);
    setTodos(newTodos);
};

<TodoList todos={todos} removeTodo={removeTodo} />
<TodoListItem key={todo.id} todo={todo} removeTodo={removeTodo} />

const TodoList = ({ todos, removeTodo }) => {
	return (
		<>
			{todos.length == 0 ? (
				<h4>할 일 없음</h4>
			) : (
				<>
					<h4>할 일 목록</h4>
					<ul>
						{todos.map((todo) => (
							<TodoListItem key={todo.id} todo={todo} removeTodo={removeTodo} />
						))}
					</ul>
				</>
			)}
		</>
	);
};

const TodoListItem = ({ todo, removeTodo: _removeTodo }) => {
    const removeTodo = () => {
        _removeTodo(todo.id);
    };

return (
    <li className="flex items-center gap-x-3 mb-3">
        <span className="badge badge-primary badge-outline">{todo.id}</span>
        <span>{todo.title}</span>
        <button className="btn btn-primary" onClick={removeTodo}>
            삭제
        </button>
    </li>
);
};

1. App 컴포넌트에 removeTodo 함수를 추가
2. TodoList, TodoListItem에 넘겨주고
3. 삭제 버튼을 눌렀을 때 removeTodo가 실행될 수 있도록 만들어줌

• 수정 기능 추가된 버전

할 일 폼 수정기능

 

• 커스텀 Hook 

const useTodoStatus = () => {
	const [todos, setTodos] = useState([]);
	const [lastTodoId, setLastTodoId] = useState(0);

	const addTodo = (title) => {
		const id = lastTodoId + 1;

		const newTodo = {
			id,
			title
		};
		setTodos([...todos, newTodo]);
		setLastTodoId(id);
	};

	const removeTodo = (id) => {
		const newTodos = todos.filter((todo) => todo.id != id);
		setTodos(newTodos);
	};

	const modifyTodo = (id, title) => {
		const newTodos = todos.map((todo) =>
			todo.id != id ? todo : { ...todo, title }
		);
		setTodos(newTodos);
	};

	return {
		todos,
		addTodo,
		removeTodo,
		modifyTodo
	};
};

const App = () => {
	const todoStatus = useTodoStatus(); // 리액트 커스텀 훅(use를 붙이는게 react 문법!)

	return (
		<>
			<NewTodoForm todoStatus={todoStatus} />
			<hr />
			<TodoList todoStatus={todoStatus}/>
		</>
	);
};

• 기존에 App에서 각자 넘겨줬던 것을 하나의 컴포넌트로 묶어서 보내주는 형식
• useTodoStatus()처럼 use를 붙여서 쓰는게 문법이래