2024-03-26 72일차 React

민짱·2024년 3월 26일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

56/85

📅2024. 03. 26 72일차

TODOLIST 리스트 형식으로 바꾸기

//생략
	return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<div>{JSON.stringify(todos)}</div>
		</>
	);

리턴 부분에서 {JSON.stringify(todos)}가 아닌 리스트 형식으로

return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<ul>
				{todos.map((todo, index) => (
					<li key={index}>{todo}</li>
				))}
			</ul>
		</>
	);

이렇게 하면?? 일단 리스트 형식으로 바뀜

쓴생님.var

return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<div>
				{todos.length == 0 ? (
					<h5>님 할일 없음????</h5>
				) : (
					<>
						<h5>새 할일</h5>
						<nav>
							<ul>
								{todos.map((todo, index) => (
									<li>
										{index + 1}번 째 할일 : {todo}
									</li>
								))}
							</ul>
						</nav>
					</>
				)}
			</div>
		</>
	);

할 일 리스트를 별도의 컴포넌트로 분리

//생략

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

const App = () => {
	//생략

	return (
		//생략
			<hr />
			<TodoList todos={todos}/>
		</>
	);
};

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

App의 hr 밑에 부분을 TodoList로 컴포턴트 해서 분리

//생략
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>
	);
};

//생략

TodoListItem 따로 분리 컴포턴트화

아이템 삭제 (리스트 삭제)

각 리스트에서 삭제 버튼 나오고 삭제버튼 눌렀을 때 삭제

const TodoListItem = ({ todo, index, removeTodo }) => {
	return (
		<li>
			{index + 1}번째 할일 : {todo}
			<button className="btn btn-secondary" onClick={() => removeTodo(index)}>삭제</button>
		</li>
	);
};

삭제 버튼 구현

const TodoList = ({ todos, removeTodo }) => {
	return (
		<div>
			{todos.length === 0 ? (
				<h5>할 일이 없습니다.</h5>
			) : (
				<>
					<h5>할 일 목록</h5>
					<nav>
						<ul>
							{todos.map((todo, index) => (
								<TodoListItem key={index} todo={todo} index={index} removeTodo={removeTodo} />
							))}
						</ul>
					</nav>
				</>
			)}
		</div>
	);
};

removeTodo={removeTodo} 추가

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("");
	};

	const removeTodo = (index) => {
		setTodos(todos.filter((_, _index) => _index !== index));
	};

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