[react]APIの取得

気になるところや修正が必要なところがあれば、いつでもコメントしてください!

reactでAPIを使用するにはaxiosを使用する必要があります.
axiosはJavaScript HTTPクライアントです.
したがって、開始前にaxiosを端末にインストールする必要があります.
端末に以下のコマンドを入力してください

> npm install axios

まずNewsAPIを持ってきます.
ニュースAPIキーの公開
リンクでこのページにアクセスし、会員に参加して鍵を取得すればいいです.

次に、リリースされた鍵を使用してニュースAPIを受信することから始めましょう.
App.js

import react, { useState, useCallback } from 'react';
import axios from 'axios';
require('dotenv').config();

const New = () => {
  const API_KEY = process.env.REACT_APP_API_KEY;
  const [data, setData] = useState(null);

  //onClick 함수
  const onClick = async () => {
    try {
      const response = await axios.get(
        `https://newsapi.org/v2/top-headlines?country=kr&apikey=${API_KEY}`,
      );
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };

  <div>
    <div>
      <button onClick={onClick}>불러오기</button>
    </div>
    {data && <textarea rows={7} value={JSON.stringify(data, null, 2)} />}
  </div>;
};

export default New;

App.jsコードを実行します.

コードを実行すると、上記のAPIが表示されます.