API란 무엇인가

API는 "응용 프로그래밍 인터페이스"를 나타냅니다. 소프트웨어 간의 통신을 허용하고 응용 프로그램 간에 데이터를 공유하는 방법을 제공합니다. REST API는 "Representational State Transfer"를 나타냅니다.

REST API is a software architectural style that defines a set of constraints and allows communication with RESTful web service. The REST API uses the HTTP request method to access and use data.

API 방법

다음은 REST API 메서드입니다.

가져오기 방법: 이름에서 알 수 있듯이 API에서 직접 데이터를 가져옵니다.

게시 방법: 게시 방법은 응용 프로그램에서 수집한 데이터를 서버 또는 API에 반환하는 데 사용됩니다.

Put 메서드: 이 작업은 요청을 변경하고 업데이트하는 데 사용됩니다.

삭제 방법: 이 방법은 필요하지 않은 정보나 데이터를 삭제하는 데 사용됩니다.

이 기사에서는 반응에서 API 호출을 사용하는 방법을 보여주기 위해 무료 API를 사용하고 있습니다.

프로젝트 설정:

명령 프롬프트에서 이 코드를 실행하여 새 반응 앱을 만듭니다.npx create-react-app api-usage그런 다음 앱으로 이동합니다.cd api-usage실 시작 또는 npm 시작 실행yarn startnpm start
브라우저에서 반응 로고가 회전하는 것을 볼 수 있습니다.

이 프로젝트의 API:

API 링크: icanhazdadjoke.com

이 프로젝트에서는 Axios를 사용할 것입니다. Axios는 HTTP 요청을 만드는 데 사용되며 API, 데이터베이스 또는 XMLRequest에서 데이터를 가져오는 데 사용됩니다.
실행: npm i axiosApp.js 내부에서 모든 것을 제거하면 다음과 같이 표시됩니다.

import React from 'react';
import './App.css';

function App() {

  return (
    <div className="App">
         {/*No component yet*/}
    </div>
  );
}

export default App;

그런 다음 src 폴더 안에 새 구성 요소Joke.js를 만듭니다. 이전에 Axios를 설치했으므로 앱으로 가져올 것입니다.

import React from 'react';
import axios from 'axios';

const Joke = () => {
return (
   <div>
      <h1>Jokes:</h1>
</div>
);
}
export default Joke;

위의 코드에서:

새로운 Joke 구성 요소를 만들고 h1 를 렌더링한 다음 default 로 Joke 구성 요소를 내보냅니다.

다음으로 Joke 구성 요소를 App.js 구성 요소로 가져와서 브라우저에 표시할 수 있도록 합니다.

import React from 'react';
import Joke from './Joke';
import './App.css';

function App() {

  return (
    <div className="App">
         {/*Joke component*/}
           <Joke/>
    </div>
  );
}

브라우저에서 화면에 Joke:가 표시되어야 합니다.



다음으로 코드에서 API를 사용하는 방법을 보여드리겠습니다.

import React, {useState} from 'react';
import axios from 'axios';

function Joke = () => {
     //create a state to store the jokes from the api
const [joke, setJoke]  useState([]); //make sure you to import useState from react

//store the api in a variable
    const apiLink = "https://icanhazdadjoke.com/";

//create a function to fetch the data
 const fetchData = async () => {
        const res = await axios.get(`${apiLink}`, { headers: { Accept: "application/json" } });
        console.log(res.data);
        console.log(res.data.joke)
    }

return (
   <div>
      <h1>Jokes:</h1>
</div>
);
}
export default Joke;

위의 코드에서:

상태를 생성했습니다const [joke, setJoke] = useState([]).
API에서 데이터를 저장하고 함수를 생성하기 위해fetchData변수에 저장된 API에서 데이터를 가져오기 위해const apiLink = "https://icanhazdadjoke.com/"; 그런 다음 응답 변수 const res = await axios.get( ${apiLink} , { headers: { Accept: "application/json" } }) 를 생성했습니다.async 및 await를 사용하여 데이터를 가져올 때마다 데이터를 기다립니다. 또한 브라우저 콘솔에 데이터를 기록하여 API에서 가져온 항목을 확인할 수 있습니다. f12를 눌러 브라우저 콘솔을 열면 개체{data}에서 API의 데이터를 볼 수 있습니다.

다음으로 우리는 브라우저 안에 농담을 표시할 것입니다.
가자🚀🚀🚀...

//imports ....

const Joke = () => {
    const [joke, setJokes] = useState([]);


    const apiLink = "https://icanhazdadjoke.com/";

    const fetchData = async () => {
        const res = await axios.get(`${apiLink}`, { headers: { Accept: "application/json" } });
        console.log(res.data.joke);
        setJokes([res.data.joke]);
    }
    return (
        <div className="joke__">
            <h1>Jokes:</h1>
               {/*Fetch data from url*/}
                <button onClick={fetchData}>Load jokes</button>

                     {/*data from api goes here*/}
                    {joke && joke.map((j, index) => (
                         <div className="data" key={index}>
                          {j}
                         </div>
                     ))}
        </div>
    )
}

export default Joke;

위의 코드에서:

fetchData 함수에서 우리는 APIsetJokes([res.data.joke]);에서 얻은 모든 농담의 응답으로 상태를 설정합니다. return 문에서 우리는 fetchData 함수를 button에 전달했으며 새 농담을 로드하는 버튼을 클릭하십시오<button onClick={fetchData}>Load jokes</button>.

아래 코드에서:

농담이 있으면 joke 배열을 통해 매핑하고 API에서 농담을 div 로 반환합니다.

  {/*data from api goes here*/}
                    {joke && joke.map((j, index) => (
                         <div className="data" key={index}>
                          {j}
                         </div>
                     ))}

이제 Joke: 및 Load jokes가 표시되는 앱을 시작합니다. Load jokes 버튼을 클릭하면 새 농담이 표시됩니다. 다음과 같아야 합니다.

요약:

이 기사에서는 반응에서 REST API를 사용하는 방법을 살펴보았습니다. GET 메서드를 사용하여 APIicanhazdadjoke.com에서 JSON 형식의 데이터를 가져온 다음 해당 데이터를 애플리케이션에 통합합니다.

Twitter에서 저에게 연락하실 수 있습니다 😉