React - 할 일 폼 만들기(2)_ul, li, 컴포넌트 분리(2)

• 3) 할 일 리스트 ul,li로 표현

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>
				<input
					className="input input-bordered"
					type="text"
					placeholder="할일을 적어보자!"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary ml-3" onClick={addTodo}>
					추가
				</button>
			</div>
		</>
	);
};

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

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

		setTodos([...todos, reimmedTitle]);
		setNewTodoTitle("");
	};
	return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr class="mt-1" />
			<div>
				{todos.length == 0 ? (
					<h5>할 일 없다!!</h5>
				) : (
					<>
						<h5>할 일 많다~~</h5>
						<nav>
							<ul>
								{todos.map((todo, index) => (
									<li>
										{index + 1}번 할일 : {todo}
									</li>
								))}
							</ul>
						</nav>
					</>
				)}
			</div>
		</>
	);
};

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

• JSON.stringify(todos)말고 nav 안에 ul, li 넣는 방식으로 구현
• map으로 todo, index받아서 li안에 index에 맞는 할 일이 추가 되도록
• todos에 값이 없으면 할 일 없다고 알려줌

• 컴포넌트 분리

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, index }) => {
	return (
		<>
			<li>
				{index + 1}번 째 할일 : {todo}
			</li>
		</>
	);
};

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

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

• TodoList, TodoListItem으로 분리
• 각각 필요한 매개변수 넘겨주고 사용!