API 요청 ⚡ 로컬 JSON 파일 📃 in React ⚛️

React ⚛️에서 가장 많이 사용되는 것 중 하나는 원격 서버에 대한 API 요청입니다. API는 일상 생활의 일부가 되었기 때문에 우리가 월드 와이드 웹에서 수행하는 거의 모든 작업에 관여합니다. API 요청은 개발자가 URL에 끝점을 추가하고 서버를 호출할 때 발생합니다.

axios를 사용하는 React/JavaScript의 기본 API 요청은 다음과 같습니다.

axios
  .get("https://api.example.com/users/")
  .then((res) => console.log(res.data))
  .catch((err) => console.log(err));

위의 JavaScript(axios) 구문에서 API 요청은 https://api.example.com 도메인(BASE URL이라고도 함) 및 /users/ 끝점으로 이루어졌습니다.

로컬 JSON 파일 요청 📃

로컬 JSON 파일에 대한 GET 요청을 만드는 것은 정말 간단하지만 확인해야 할 몇 가지 전제 조건이 있습니다.

Make sure, JSON File is accessible through the server, ie. the file should be in public/ folder.

생성public/db/users.json

[
  {
    id: 1,
    first_name: "John",
    last_name: "Doe",
  },
  {
    id: 2,
    first_name: "Jane",
    last_name: "Doe",
  },
  {
    id: 3,
    first_name: "Johny",
    last_name: "Doe",
  },
];

참고: 서버가 실행 중일 때 http://localhost:3000/db/users.json에서 JSON 파일에 액세스할 수 있는지 확인하십시오.


이번에는 JSON 파일에 GET 요청을 하려면 다음과 같이 하면 된다.

axios
  .get("/db/users.json")
  .then((res) => console.log(res.data))
  .catch((err) => console.log(err));

반응 예

Create React App

$ npx create-react-app my-app

---> 100%

$ cd my-app

Install axios

$ yarn add axios

Add JSON File public/db/users.json

[
  {
    id: 1,
    first_name: "John",
    last_name: "Doe",
  },
  {
    id: 2,
    first_name: "Jane",
    last_name: "Doe",
  },
  {
    id: 3,
    first_name: "Johny",
    last_name: "Doe",
  },
];

Update App.js

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("/db/users.json")
      .then((res) => setUsers(res.data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <ul>
        {users.map((user, index) => (
          <li key={index}>
            #{user.id}: {user.first_name} {user.last_name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Run the development server

$ yarn start

이 빠른 자습서API Request ⚡ to Local JSON File 📃 in React ⚛️가 마음에 드셨기를 바랍니다. 그렇다면 좋아요 잊지마세요❤️

또한 내 .

행복한 코딩! 😃💻