React - 할 일 폼 만들기(5)_ 2차원배열, 번호 증가, 매개변수 변경, 목록 UI변경

• 할 일 입력(2차원 배열)

const NewTodoForm = ({addTodo:_addTodo}) => {
	const [newTodoTitle, setNewTodoTitle] = useState("");
	
	const addTodo = () => {
		if(newTodoTitle.trim().length == 0) return;
		
		const id = 1;
		const title = newTodoTitle;
		const newTodo = {
			id,
			title
		};
		_addTodo(newTodo);
		setNewTodoTitle('');
		
	}
	
	return (
		<>
			<div className="flex items-center 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>
		</>
	);
};

• newTodo의 값을 객체형식으로 만들어줌 -> {id, title}로
• 그래서 결과는 아래와 같이 나옴

todos의 2차원 데이터

• 할 일 번호 증가
  • 기존에는 const id = 1로 고정인 상태였음
  • 원래 있던 id는 없애고 App에서 const [lastTodoId, setLastTodoId] = useState(0); -> 새로운 변수 만들어서 id를 만들어주고 addTodo가 실행될 때마다 setLastTodoId 해줘~

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

	const addTodo = (newTodo) => {
		newTodo.id = lastTodoId + 1;
		setTodos([...todos, newTodo]);
		
		setLastTodoId(newTodo.id);
	};

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

• 매개변수 변경
  
  • 기존에는 addTodo에서 id, title을 다 받았는데 title만 받게하고 id는 App에서 처리하게?
  • addTodo의 newTodo를 App에서 만들어줘 

const App = () => {
	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);
	};

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

• 할 일 리스트 UI 변경 

const TodoListItem = ({ todo }) => {
	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>
		</li>
	);
};

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

• const TodoList = (todos) => {return <>{JSON.stringify(todos)}</>;}; 형식 말고 ul, li로 변경