소개

React 공부를 시작했기 때문에 시작에 API를 두드려 초간단한 앱을 처음부터 만들어 보는 연습을 했습니다.
이번에 사용한 API는 Qiita API v2입니다. 작성한 앱은 GitHub 리포지토리에 있습니다.

어떤 API를 두드릴지 결정할 때 참고로 한 기사
htps : // 이 m / 감귤 3rd / ms / ba 4737023f08-b2 또는 161
앱을 만들 때 참고한 기사
htps : // 코 m/g차규/있어 ms/4d186df2에90c53228951

create-react-app로 프로젝트 만들기

create-react-app를 사용하여 앱의 병아리를 만들 수 있습니다. 이번에는 react-api-study라는 앱 이름으로 만들었습니다.

참고
h tps : // c 어서 - 라 ct - 아 p. 에서 v/

$ create-react-app react-api-study

axios 설치

앱을 만든 후 디렉토리를 이동하여 axios를 설치합니다.

$ cd react-api-study
$ yarn add axios

앱 구현

이번에는 QiitaAPI의 https://qiita.com/api/v2/items 엔드 포인트를 두드려 기사 목록을 가져와 제목과 URL을 표시합니다.

GET/api/v2/items
기사 목록을 작성 날짜와 시간의 내림차순으로 반환합니다.

page

페이지 번호 (1에서 100까지)

Example: 1

Type: string

Pattern:/^[0-9]+$/

per_page

페이지 당 포함 된 요소 수 (1에서 100까지)

Example: 20

Type: string

Pattern:/^[0-9]+$/

query

검색 쿼리

Example: "qiita user:yaotti"

Type: string

src/index.js의 확장자를 변경하여 src/index.jsx를 작성합니다.

src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 次に記述する src/components/App.jsx をインポートする
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

src 디렉터리 아래에 components 디렉터리를 만들고 그 안에 App.jsx 파일을 만들어 다음 소스를 작성합니다.

src/components/App.jsx

import React, { Component } from 'react';
// axiosをインポート
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
    this.getQiitaPosts = this.getQiitaPosts.bind(this);
    this.state = {
      // ここを`React`など検索したいワードに変えられる
      query: 'React'
    }
  }

  // QiitaAPIを叩く
  getQiitaPosts() {
    //axios.get(APIのエンドポイント,パラメータの引数)
    axios.get('https://qiita.com/api/v2/items', {
        params: {
          "page": "1",
          "per_page": "20",
          "query": this.state.query,
        }
      })
      // response にAPIからのレスポンスが格納される
      .then((response) => {
        // data にレスポンスから帰ってきた1つ目の記事の情報を格納
        const data = response.data[0];
        this.setState({
          title: data.title,
          url: data.url,
        });
        // コンソールから response と title と url を確認
        console.debug(response, "ressponse");
        console.debug(this.state.title, "title")
        console.debug(this.state.url, "url")
      })
      .catch((error) => {
        console.debug(error);
      });
  }

  // 表示されるHTMLを記述
  render() {
    return (
      <div className="App">
        <h1 className="app-title">Hello Qiita API</h1>
        <p>タイトル: {this.state.title}</p>
        <p>URL: <a target="__blank" href={this.state.url}>{this.state.url}</a></p>
        <input
          type="button"
          value="検索"
          onClick={() => this.getQiitaPosts()}
        />
      </div>
    )
  }
}

export default App;

{this.state.title} 등으로 API에서 가져온 값을 포함하여 표시하고 있습니다.<a target="__brank" href={this.state.url}> a 태그의 href 속성에 url을 지정하여 링크를 포함합니다.onClick={() => this.getQiitaPosts()}에서 검색 버튼을 클릭하면 QiitaAPI를 두드리는 함수를 호출합니다.

완성

터미널에서 npm start로 부팅하고 localhost:3000를 엽니 다.

검색 버튼을 누른 후 화면

결론

잘못되었거나 개선하는 것이 더 나은 경우 주석에서 부드럽게 말해주세요. mm