React 학습

계산기

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;