React - 할 일 폼 만들기(3)_삭제, plantuml(구조 파악)

• 할 일 삭제

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const TodoWriteForm = ({ newTodoTitle, setNewTodoTitle, addTodo }) => {
	return (
		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary" onClick={addTodo}>
					할 일 추가
				</button>
			</div>
		</>
	);
};

const TodoListItem = ({ todo, todos, index, setTodos }) => {
	console.log(`index : ${index}`);
	
	const removeTodo = () => {
		const newTodos = todos.filter((_,_index) => index != _index);
		setTodos(newTodos);
	};

	return (
		<>
			<li className="flex items-center gap-x-3">
				<span>
					{index + 1}번 째 할일 : {todo}
				</span>
				<button className="btn btn-secondary" onClick={removeTodo}>삭제</button>
			</li>
		</>
	);
};

const TodoList = ({ todos, setTodos }) => {
	return (
		<div>
			{todos.length == 0 ? (
				<h5>님 할일 없음????</h5>
			) : (
				<>
					<h5>새 할일</h5>
					<nav>
						<ul>
							{todos.map((todo, index) => (
								<TodoListItem
									key={index}
									todo={todo}
									index={index}
									todos={todos}
									setTodos={setTodos}
								/>
							))}
						</ul>
					</nav>
				</>
			)}
		</div>
	);
};

const App = () => {
	const [todos, setTodos] = useState([]);
	const [newTodoTitle, setNewTodoTitle] = useState("");

	const addTodo = () => {
		const trimmedTitle = newTodoTitle.trim();
		if (trimmedTitle.length == 0) return;

		setTodos([...todos, trimmedTitle]);
		setNewTodoTitle("");
	};

	return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<TodoList todos={todos} setTodos={setTodos} />
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• TodoListItem의 삭제 버튼이 App에 있는 setTodos로 값을 변경해야 하니까 App에서 TodoList에 setTodos을 넘겨주고 넘겨받은 걸 TodoListItem한테 다시 넘겨줘야 함
• plantuml 객체 구조 나타낼 수 있는 사이트(https://plantuml.com/ko/object-diagram)

 

• 함수와 데이터는 최대한 하류에서 생성! 그다음 상류에는 꼭 필요한 것만 정의! (App-상류)