간단한 TODO reactjs 앱 만들기

CRUD(만들기, 읽기, 업데이트 및 삭제)의 기본 원칙을 가르치는 간단한 Todo 앱을 React로 빌드해 보겠습니다.

안녕하세요 독자 여러분! React로 무언가를 만드는 것에 대한 기사를 쓰는 것은 이번이 처음입니다. Todo 앱을 구축하는 것은 쉽고 시간이 많이 걸리지 않지만 reactjs에서 몇 가지 중요한 개념을 알려줍니다. 모든 개발자가 이해해야 하는 매우 중요한 CRUD(Create, Read, Update 및 Delete)의 원리를 알려줍니다.
간단한 할 일 목록을 작성하면 페이지를 새로고침하면 할 일을 추적할 수 없습니다. 따라서 완벽한 솔루션은 아니지만 좋은 시작입니다.
Redux와 서버를 포함하는 고급 Todo 앱을 구축하는 방법을 배우겠지만 지금은 간단하게 유지하고 싶습니다.
의 시작하자...

이제 첫 번째 React Todo 앱 빌드를 시작해 보겠습니다.

npx create-react-app 할 일

이제 현재 저장소에 'todo'라는 폴더가 생성됩니다. 다음으로 todo 폴더 내부로 이동해야 합니다.

    cd todo

이제 부트스트랩 라이브러리를 사용하여 스타일을 적용하는 데 도움이 되는 npm을 사용하여 필요한 라이브러리를 설치합니다.

    npm install react-bootstrap bootstrap

위의 명령을 실행하면 todo 앱에 react-bootstrap 및 bootstrap 패키지가 모두 설치됩니다.
이제 앱을 빌드할 준비가 되었습니다.

앱.css

이제 스타일을 지정하기 위해 사용자 정의 CSS 코드를 작성해 보겠습니다.

 .app {
   padding: 30px;
   background-color: #848586;
 }
 .todo {
   display: flex;
   align-items: center;
   font-size: 18px;
   justify-content: space-between;
 }

앱.js
다음으로 App.js 파일에서 필요한 항목을 가져오는 것부터 시작하겠습니다.

 import React, {useState, useEffect} from "react";
 import { Button, Card, Form } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "./App.css";

우리는 React Hooks를 사용할 것입니다.
그래서, 우리는 앱의 주요 Todo 기능부터 시작합니다.
우리는 모든 할일을 포함하고 완료 여부에 관계없이 각 할일의 상태를 전달하는 할일 목록을 정의할 것입니다. setTodos를 사용하고 useState 후크를 사용합니다.

  const App = () => {
   const [todos, setTodos] = useState([
    { 
      label: "This is a sampe todo",
      isDone: false
      }
    ]);
  }

다음으로 할일을 추가하는 부분으로 넘어갑니다. addTodo 함수를 정의하고 할 일 목록을 가져오고 새 할 일의 레이블을 목록에 추가하는 newTodos를 정의합니다. 그런 다음 setTodos를 사용하여 newTodos를 todo로 설정합니다.

   const addTodo = (label) => {
    const newTodos = [...todos, { label }];
     setTodos(newTodos);
   };

다음으로 Todos를 완료로 표시하는 부분으로 이동합니다. 우리는 markTodo 함수를 정의할 것입니다. 스프레드 연산자를 사용하여 newTodos에 있는 모든 할 일을 복사한 다음 인덱스를 사용하여 할 일을 완료로 표시한 다음 newTodos를 할일로 설정합니다.

  const markTodo = index => {
   const newTodos = [...todos];
    newTodos[index].isDone = true;
    setTodos(newTodos);
  };

다음으로 할일을 삭제하는 부분을 이동합니다. 같은 방법으로 이번에는 인덱스를 사용하여 목록을 연결하고 인덱스가 일치하는 할일을 제거한 다음 새 할일을 설정합니다.
다음으로 할일을 삭제하는 부분을 이동합니다. 이번에는 인덱스를 사용하여 목록을 연결하고 인덱스가 일치하는 할일을 제거한 다음 새 할일을 설정합니다.

  const removeTodo = index => {
   const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

그런 다음 앱 기능을 마칩니다. 우리는 나중에 정의할 FormTodo 구성 요소를 사용하고 있습니다. addTodo를 매개변수로 받아들입니다.
그런 다음 모든 할일 목록을 표시합니다. 모든 할 일을 가져와서 Todo 구성 요소에 전달합니다. index, todo, markTodo 및 removeTodo 함수를 보냅니다.

  return (
   <div className="app">
    <div className="container">
     <h1 className="text-center mb-4">Todo List</h1>
     <FormTodo addTodo={addTodo} />
      <div>
       {todos.map((todo, index) => (
        <Card>
         <Card.Body>
          <Todo
           key={index}
            index={index}
            todo={todo}
            markTodo={markTodo}
            removeTodo={removeTodo}
            />
          </Card.Body>
         </Card>
        ))}
      </div>
     </div>
    </div>
  );

이제 Todo 구성 요소를 정의합니다. 이전에 Todo 구성 요소를 호출할 때 전달한 매개 변수를 허용합니다.
우리는 각 Todo를 보여줄 일부 JSX를 반환합니다. 할 일을 완료로 표시하고 할 일을 제거하는 두 개의 버튼도 표시됩니다.

 const Todo = ({ todo, index, markTodo, removeTodo }) ={
  return (
   <div className="todo" >
    <span style={{ textDecoration: todo.isDone ? "line- through" : "" }}>{todo.label}</span>
    <div>
     <Button variant="outline-success" onClick={() => 
      markTodo(index)}>✓</Button>{' '}
     <Button variant="outline-danger" onClick={() => 
     removeTodo(index)}>✕</Button>
     </div>
    </div>
   );
 }

다음으로 FormTodo 함수를 정의합니다. addTodo를 매개변수로 받아들입니다. 새로운 Todo 제출을 처리합니다. 값이 비어 있지 않으면 해당 할 일 텍스트에서 addTodo 함수를 호출한 다음 양식의 값을 다시 비어 있도록 설정합니다.
할 일을 수락하고 할 일 제출을 위한 제출 버튼이 있는 양식을 반환합니다. 제출 버튼을 클릭하면 할 일 목록에 할일이 추가됩니다.

     const FormTodo = ({ addTodo }) => {
      const [value, setValue] = useState("");

      const handleSubmit = e => {
       e.preventDefault();
       if (!value) return;
       addTodo(value);
       setValue("");
      };

      return (
       <Form onSubmit={handleSubmit}> 
        <Form.Group>
         <Form.Label><b>Add Todo</b></Form.Label>
         <Form.Control type="text" className="input" value= 
         {value} onChange={e => setValue(e.target.value)} 
         placeholder="Add new todo" />
        </Form.Group>
        <Button variant="primary mb-3" type="submit">
         Submit
         </Button>
        </Form>
       );
      }

이제 App.js 파일을 살펴보겠습니다.

       import React, {useState, useEffect} from "react";
       import { Button, Card, Form } from 'react-bootstrap';
       import 'bootstrap/dist/css/bootstrap.min.css';
       import "./App.css";

       const Todo = ({ todo, index, markTodo, removeTodo }) 
        => {
        return (
         <div className="todo">
         <span style={{ textDecoration: todo.isDone ? "line- 
          through" : "" }}>{todo.label}</span>
         <div>
        <Button variant="outline-success" onClick={() => 
         markTodo(index)}>✓</Button>{' '}
        <Button variant="outline-danger" onClick={() => 
         removeTodo(index)}>✕</Button>
       </div>
     </div>
     );
    }

     const FormTodo = ({ addTodo }) => {
      const [value, setValue] = useState("");
      const handleSubmit = e => {
      e.preventDefault();
      if (!value) return;
      addTodo(value);
      setValue("");
     };

      return (
      <Form onSubmit={handleSubmit}> 
      <Form.Group>
       <Form.Label><b>Add Todo</b></Form.Label>
       <Form.Control type="text" className="input" value= 
       {value} onChange={e => setValue(e.target.value)} 
       placeholder="Add new todo" />
     </Form.Group>
     <Button variant="primary mb-3" type="submit">
       Submit
     </Button>
    </Form>
    );
   }

    const App = () => {
    const [todos, setTodos] = useState([
      {
      label: "This is a sampe todo",
      isDone: false
      }
     ]);

     const addTodo = label => {
      const newTodos = [...todos, { label }];
      setTodos(newTodos);
     };

     const markTodo = index => {
      const newTodos = [...todos];
      newTodos[index].isDone = true;
      setTodos(newTodos);
     };

     const removeTodo = index => {
      const newTodos = [...todos];
      newTodos.splice(index, 1);
      setTodos(newTodos);
     };

     return (
       <div className="app">
        <div className="container">
         <h1 className="text-center mb-4">Todo List</h1>
         <FormTodo addTodo={addTodo} />
           <div>
           {todos.map((todo, index) => (
            <Card>
              <Card.Body>
                <Todo
                key={index}
                index={index}
                todo={todo}
                markTodo={markTodo}
                removeTodo={removeTodo}
                />
              </Card.Body>
            </Card>
           ))}
          </div>
         </div>
        </div>
      );
     }

     export default App;

이제 할 일 앱을 실행할 수 있습니다.

npm start