계산기
import { useState } from "react";
export default function App() {
const [cr, setCr] = useState(0);
const [newNumber, setNewNumber] = useState("");
const addNumber = () => {
if (newNumber === "") {
setNewNumber("");
alert("값을 입력하세요.");
return;
}
setCr(cr + parseInt(newNumber));
setNewNumber("");
};
const subNumber = () => {
if (newNumber === "") {
setNewNumber("");
alert("값을 입력하세요.");
return;
}
setCr(cr - parseInt(newNumber));
setNewNumber("");
};
const initNumber = () => {
setCr(0);
setNewNumber("");
};
return (
<div>
<h1>덧셈과 뺄셈이 가능한 앱 만들기</h1>
<div>
<input
type="text"
value={newNumber}
onChange={(event) => {
setNewNumber(event.target.value);
}}
/>{" "}
만큼을{" "}
<button
onClick={() => {
addNumber();
}}
>
더할게요
</button>{" "}
<button
onClick={() => {
subNumber();
}}
>
뺄게요
</button>
<button
onClick={() => {
initNumber();
}}
>
초기화
</button>
</div>
<hr />
<div>
<h3>결과</h3>
<p>{cr}</p>
</div>
</div>
);
}
투두리스트 보완
import { useState } from "react";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
export default function App() {
const [todoList, setTodoList] = useState([]);
return (
<>
<h1>투두리스트 타임어택</h1>
<div>
<TodoForm todoList={todoList} setTodoList={setTodoList} />
</div>
<div>
<TodoList
todoList={todoList}
setTodoList={setTodoList}
todoIsDone={false}
/>
<TodoList
todoList={todoList}
setTodoList={setTodoList}
todoIsDone={true}
/>
</div>
</>
);
}
import { useState } from "react";
const TodoForm = ({ todoList, setTodoList }) => {
const [newTitle, setNewTitle] = useState("");
const [newContent, setNewContent] = useState("");
const addTodo = (submit) => {
submit.preventDefault();
const todo = {
id: crypto.randomUUID(),
title: newTitle,
content: newContent,
isDone: false,
};
if (newTitle === "" || newContent === "") {
alert("값을 모두 입력하세요.");
setNewTitle("");
setNewContent("");
return;
}
setTodoList([...todoList, todo]);
setNewTitle("");
setNewContent("");
};
return (
<form onSubmit={addTodo}>
제목:{" "}
<input
type="text"
value={newTitle}
onChange={(event) => {
setNewTitle(event.target.value);
}}
/>
내용:{" "}
<input
type="text"
value={newContent}
onChange={(event) => {
setNewContent(event.target.value);
}}
/>
<button>추가</button>
</form>
);
};
export default TodoForm;
import TodoItem from "./TodoItem";
const TodoList = ({ todoList, setTodoList, todoIsDone }) => {
const removeTodo = (id) => {
return setTodoList(todoList.filter((todo) => todo.id !== id));
};
const toggleTodo = (id) => {
return setTodoList(
todoList.map((todo) =>
todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
)
);
};
return (
<>
<h2>{!todoIsDone ? "Work" : "Done"}</h2>
<div style={{ display: "flex" }}>
{todoList
.filter((todo) => todo.isDone === todoIsDone)
.map((todo) => {
return (
<div key={todo.id}>
<TodoItem
todo={todo}
removeTodo={removeTodo}
toggleTodo={toggleTodo}
/>
</div>
);
})}
</div>
</>
);
};
export default TodoList;
const TodoItem = ({ todo, removeTodo, toggleTodo }) => {
return (
<div>
{" "}
<p>{todo.title}</p>
<p>{todo.content}</p>
<button
onClick={() => {
removeTodo(todo.id);
}}
>
삭제
</button>
<button
onClick={() => {
toggleTodo(todo.id);
}}
>
{!todo.isDone ? "완료" : "취소"}
</button>
</div>
);
};
export default TodoItem;