Daily React 3 - 데이터 추가 및 삭제

오늘의 반응 비트는 응용 프로그램 규칙에 반응하기 위해 실제로 일반화된 것이 아니라 염두에 두고 있는 내 앱의 요구 사항에 따라 다릅니다. 그것은 '수학 저장소 앱'이라고합니다.

그래서 동기 부여는,,, 대학 학부생과 대학원생 모두 교과서에서 도대체 무슨 일이 일어나고 있는지 모르기 때문에 수학에서 똑같이 어려움을 겪고 있다는 것입니다. 대학 1학년 때 많은 사람들이 시험에 대한 공포에 휩싸입니다. 시험은 무언가를 계산하라고 요구하는 것이 아니라(예: 1+1이 무엇입니까?) 무언가를 '증명'하라는 것입니다(왜 두 개의 음수를 곱하면 양수가 됩니까?) ?). 사람들이 당황하는 것은 놀라운 일이 아닙니다. 더욱이, 일단 증명이 무엇인지 이해하게 되면, 학생들은 증명이 과학적 발견과 인류 발전에 가져올 수 있는 것이 무엇인지 완전히 맛보지 못한 채 이미 졸업하고 있습니다.

그래서 대학에서 수학 증명을 배우는 사람들에게는 매우 느릴 수 있고 더 나쁜 것은 어떤 사람들은 절대 답을 주지 않습니다. 좋아, 배우는 데 도움이 될 수 있지만 내 gpa 비용도? 아니! 결국 일어나는 일은 사람들이 코스를 포기하는 것입니다. 짜잔! 증명과 공리가 모두 있고 사람들이 10년 전에 보았던 교과서로 돌아가지 않고도 수학 정리를 발견하는 데 기여할 수 있는 쉽게 액세스할 수 있는 수학 저장소 앱을 만들어 봅시다. 따라서 전문가의 경우에도 이것은 훨씬 더 빠른 수학적 발견을 가져올 수 있습니다.

TLDR? 괜찮아. 이것은 수학 공리와 정리가 저장되는 앱이며 한 번의 클릭으로 볼 수 있습니다. 이해가 안 되세요? 시간을 가지거나 떠나십시오. 인생에는 즐길 수 있는 다른 많은 것들이 있지만 증거를 좋아하고 그것을 탐구하고 싶다면 계속 찾아보기만 하면 됩니다.

그래서 지난번부터 문장을 추가하고 수학 문장을 삭제할 수 있는 기능을 추가했는데 클릭하여 다른 수학 교과서로 이동해도 그 상태가 사라지지 않습니다.



따라서 여기에서 볼 수 있는 두 개의 핸들러가 있습니다. 하나는 수학 문을 추가하기 위한 핸들러이고 다른 하나는 수학 문을 제거하기 위한 핸들러입니다.

항목을 삭제하고 항목을 배열에 연결하고 이를 사용하여 내 공리 상태를 업데이트하는 데 필터 메서드를 사용했습니다(setAxioms 사용).

핸들러에 대한 코드의 세부사항은 다음과 같습니다.

import React, { useState, useEffect } from "react";
import data from "./data";
import { v4 as uuidv4 } from "uuid";

const Statements = (props) => {
    const [axioms, setAxioms] = useState(props.statements);

    //this connects the state from Components state
    useEffect(() => {
        setAxioms(props.statements);
    }, [props.statements]);

    const removeItem = (id) => {
        let unremovedItem = axioms.filter((sentence) => {
            return sentence.id !== id;
        });
        setAxioms(unremovedItem);
        data[props.index].statements = unremovedItem;
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const newAxiom = axioms.concat({
            id: uuidv4(),
            statement: document.getElementById("statement").value,
        });
        setAxioms(newAxiom);
        data[props.index].statements = newAxiom;
        document.getElementById("statement").value = "";
    };

    return (
        <>
            <ol>
                {axioms.map((sentence) => {
                    const { id, statement } = sentence;
                    return (
                        <li key={id} className="sentences">
                            <p>
                                <strong>{statement}</strong>
                            </p>
                            <button>EDIT</button>
                            <button onClick={() => removeItem(id)}>
                                REMOVE
                            </button>
                        </li>
                    );
                })}
            </ol>
            <div className="form">
                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        name="axiom"
                        id="statement"
                        required="required"
                    />
                    <button>ADD</button>
                </form>
            </div>
        </>
    );
};

export default Statements;

이것은 분명히 UI 전용이며 이 추가 및 삭제된 문은 새로고침되면 사라집니다. 따라서 다음에 해야 할 일은 CRUD 앱(서버 측)을 만들고 이 클라이언트 측 앱에 연결하는 것입니다.

모든 코드는 내github에 있습니다 :)