간단한 GitHub 조회 프로그램 예제

요즘 리액트에 관심이 많이 생겨서 틈틈히 공부하는 중입니다.

토요일 아침 간단한 GitHub api 를 이용한 조회 프로그램을 만들어 봄.

 

소스

import React, { useState } from "react";

function App() {

  const [keyword, setKeyword] = useState('');
  const [data, setData] = useState([]);

  const fetchData=()=>{
    fetch('https://api.github.com/search/repositories?q=${keyword}')
    .then(response => response.json())
    .then(data => setData(data.items))
    .catch(err => console.error(err))
  }

  return (
    <div>
      <h1>깃허브 조회하기</h1>
      <h2>{new Date().toLocaleDateString()}</h2>

    <input value={keyword} onChange={e=> setKeyword(e.target.value)}/>
    <button onClick={fetchData}>가져오기</button>
    <table>
        <tbody>
          {
            data.map(repo =>
              <tr key={repo.id}>
                <td>{repo.full_name}</td>
                <td>
                  <a href={repo.html_url}>{repo.html_url}</a>
                </td>
              </tr>
            )
          }
        </tbody>
    </table>
    </div>
  );
}

export default App;

 

실행 결과

 

"리액트" 를 input box에 입력하고 가져오기 버튼을 누르면, 

 

웹브라우저에서 fetch 함수 주소를 넣어 결과를 확인해보고 만들어보기.