리액트 22강

 백엔드 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>
    );
}