React JS의 테이블에 Dummy API JSON 데이터 표시

Hello There 반응 js를 사용하여 표 형식으로 Dummy API 데이터를 표시하려면 tboday, tr, th, td와 같은 HTML 태그에 대한 지식이 있어야 합니다. API에서 데이터를 얻기 위해 Fetch API를 사용하고 있습니다.
REST APIREST API를 사용하여 데이터를 가져온 후 웹 브라우저에서 표 형식으로 json 데이터를 표시해야 합니다. 따라서 작업에서 우리는 html 및 css를 사용하여 테이블 형식으로 데이터 표시 작업을 완료하기 위해 언급된 단계는 다음과 같습니다.단계:-1 새 반응 만들기 사용하는 앱

 npx create-react-app apidataintableform
 

단계:-2 HTTP 요청 및 응답
데모 API를 제공하는 JSON 자리 표시자 사이트의 데이터입니다. 자신의 API를 호출하려는 경우에도 괜찮습니다. 응답에 따라 약간의 변경만 하면 됩니다.
fetch() 함수는 다음과 같습니다const fetchData = () => {
fetch(URL)
.then((res) =>
res.json())
.then((response) => {
console.log(response);
getData(response);
})
} 단계:-3 이제 UI 요소에 데이터 저장

 <tbody>
             <tr>
                    <th>User Id</th>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
                {data.map((item, i) => (
                    <tr key={i}>
                        <td>{item.userId}</td>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.body}</td>
                    </tr>
                ))}
            </tbody>
 

단계:-4 완전한 코드

 import logo from "./logo.svg";
import "./App.css";
import "./table.css";
import { useEffect, useState } from "react";

function App() {
  const [data, getData] = useState([]);
  const URL = "https://jsonplaceholder.typicode.com/posts";

  useEffect(() => {
    fetchData();
  }, []);`

  const fetchData = () => {
    fetch(URL)
      .then((res) => res.json())

      .then((response) => {
        console.log(response);
        getData(response);
      });
  };
  `return (
    <div>
      <h1>How Display API data in Table in React JS</h1>
      <tbody>
        <tr>
          <th>User ID</th>
          <th>ID</th>
          <th>Title</th>
          <th>Descripation</th>
        </tr>
        {data.map((item, i) => (
          <tr key={i}>
            <td>{item.userId}</td>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.body}</td>
          </tr>
        ))}
      </tbody>
    </div>
  );
}

export default App;
 

코드 저장소Link
프로젝트 호스팅 URLLINK