기록

데이터 삭제하는 기능

import {useState} from "react";

export default function Item({item:i}){
    const [item, setItem] = useState(i);

    const toggle = () => {
        fetch(`http://localhost:3001/items/${item.id}`,{
            method:"PUT",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                ...item,
                status: item.status === "done"? "todo" : "done" //상태를 반대로 해주기
            })
        }).then((res)=>{
            if(res.ok){
                setItem({
                    ...item,
                status: item.status === "done"? "todo" : "done"
                })
            }
        })
    }

    const deleteItem = () => {
        if (window.confirm("삭제하시겠습니까?")){
            fetch(`http://localhost:3001/items/${item.id}`,{
                method: "DELETE"
            }).then((res)=>{
                if(res.ok){
                    setItem({id:0})
                }
            })
        }

        if(item.id === 0){
            return null;
        }

    }

    return(
        <tr>
                <td><input type="checkbox" checked={item.status === "done"? true:false} onClick={toggle}/></td>
                <td>{item.task}</td>
                <td>{item.due}</td>
                <td><button onClick={deleteItem}>Delete</button></td>
            </tr>
    );
}

item.js

get메소드- 단순히 서버에서 데이터를 가지고 오는 것
포스트메소드- api서버에 새로운 게시물을 등록해주는 것, 보내주는 것

import { useRef, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function CreateItem() {

    const [values, setValues] = useState({ //화면에 글씨치면 나오게해주는애
        task: "", due: ""
    });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value
        });
    };

    const navigate = useNavigate();
    const ref = useRef(); //포커스를 첫번째 input에 맞춰주는 애

    useEffect(() => {
        ref.current.focus();
    })

    const onSubmit = (event) => {
        event.preventDefault(); //오타조심...

        fetch("http://localhost:3001/items", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                 task: values.task, 
                 due: values.due, 
                 status: "todo" 
                }),
        }).then((res) => {
            if (res.ok) {
                alert("Create new item!");
                navigate("/todo");
            }
        });
    };

    return (<form onSubmit={onSubmit}>
        <div className="input_area">
            <p>Task</p>
            <input type="text" name="task" value={values.task} onChange={handleChange} ref={ref}/>
            <p>Due</p>
            <input type="text" name="due" value={values.due} onChange={handleChange} />
        </div>
        <button>Create</button>
    </form>
    );
}

Createitem

영어오타는 정말 조심해야겠다는 깨달음을 얻었다...

 백엔드 API를 리액트 앱과 연결

import { useState, useEffect } from "react";
import Item from "./Item"; //데이터를 react와 연결하기 위해 import 

export default function items() {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [data, setData] = useState([]);

    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(()=>{
        fetch("http://localhost:3001/items").then((res)=>{
            return res.json() //response는 json형식으로 받음
        })
        .then((json_response) => { //입력으로 받은 json_response를
            setData(json_response); //state에다 넣어줌, 6번째줄에 있는 data에 들어감
        });//fetch : 어떤 입력받은 주소로 http메소드로 리퀘스트를 보내는 역할  
    });


    return (
    <table>
        <td></td>
        <td>Task</td>
        <td>Due</td>
        <td></td>
        {data.map( //데이터가 array이므로 map함수를 씀
            (item)=>{ //item을 입력으로 받아 
                return <Item key={item.id} item={item}/> //함수에서 유일하게 리턴하는 컴포넌트들의 id를 key로
            }
        )}
    </table>
    );
}

• 리액트는 웹사이트에 상호작용을 하기 위해서 만들어짐
• 버튼을 클릭함에 따라 화면에 텍스트가 변하게 하려면
  • 바닐라js : html->id->get id->event listener->function
  • 리액트js : 버튼생성, 클릭감지를 하려면 무엇이 필요한지 앎, 빠른 아이디어들을 모아둔 것   

데이터 보는 방법

• 모든 item 보기
  • http://localhost:3001/items
  • 이 경로는 기본적으로 새로운 item을 추가하거나 삭제할 때 사용

• id에 따른 item 보기
  • http://localhost:3001/items/3...4..5(id 값)
• 상태에 따른 item 보기
  • http://localhost:3001/items?status=done(todo)

할일 목록 화면에 표시

import {useState} from "react";

export default function Item({item:i}){
    const [item, setItem] = useState(i);
    return(
        <tr>
                <td><input type="checkbox" checked={item.status === "done"? true:false}/></td>
                <td>{item.task}</td>
                <td>{item.due}</td>
                <td></td>
            </tr>
    );
}

item.js

import Item from "./Item";

export default function items() {

    var item={status:"todo", task:"커피마시기", due:"20220330"}; //todo=해야되는 일이라서 체크표시

    return (
    <table>
        <td></td>
        <td>Task</td>
        <td>Due</td>
        <td></td>
        <Item item={item}/>
        <Item item={item}/>
        <Item item={item}/>
    </table>
    );
}

items.js

메인페이지 만들기

import React from "react";
import Items from "./components/Items";
import Header from "./components/Header";
import CreateItem from "./components/Createitem";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                <Routes>
                    <Route path="/" element={<Items/>}/>
                    <Route path="/todo" element={<Items/>}/>
                    <Route path="/done" element={<Items/>}/>
                    <Route path="/create_item" element={<CreateItem/>}/>
                </Routes>
            </div>
        </BrowserRouter>
    );
}

export default App;

App.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

index.js - > 여기서 화면이 나오는 거임

export default function items(){
    return(<table>
            <td></td>
            <td>Task</td>
            <td>Due</td>
            <td></td>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>커피마시기</td>
                <td>220331</td>
                <td></td>
            </tr>
    </table>
    );
}

items.js

• api(Application Programming Interface)
• 우리가 만든 로직에 대한 프로그램이 있으면 그 프로그램을 다른 프로그램에서 사용할 수 있도록 프로그램적인 인터페이스를 제공하는 것
• 웹서비스에서 사용하는 api는 백엔드에서 구현된 api를 말함
• json파일에서 api서버를 바로 만들 수 있고, 이 서버를 프로젝트에서 사용

{
    "items" : [
        {"id":1, "tesk":"숙제하기", "due":20221131, "status":"todo"},
        {"id":2, "tesk":"숙제하기", "due":20221131, "status":"todo"},
        {"id":3, "tesk":"숙제하기", "due":20221131, "status":"todo"}
    ]
}

data.json파일