본문 바로가기

Programming/React

Newsapi api 키 발급받기

반응형

 

1. https://newsapi.org/register에 가입합니다.

 

News API – Search News and Blog Articles on the Web

Get JSON search results for global news articles in real-time with our free News API.

newsapi.org

가입 완료시 나오는 API Key를 저장해둡시다. 나중에  API 요청할 때 써먹어야 합니다.

 

2. 한국 Link에 들어가봅니다.

https://newsapi.org/s/south-korea-news-api 

 

News API – Search News and Blog Articles on the Web

Get JSON search results for global news articles in real-time with our free News API.

newsapi.org

3. 한국 전체 뉴스를 가져오는 API 주소를 사용하겠습니다.(복사)

 

4. App.js 파일 작성

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

const App = () => {
  const [data, setData] = useState(null);  
  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://newsapi.org/v2/top-headlines?country=kr&apiKey=9b9cc0aa70394bc4950b08fb1faca2f7',
      );
      setData(response.data);
    } catch(e) {
      console.log(e);
    }    
  };
  return (
    <div>
      <div>
        <button onClick = {onClick}>불러오기</button>
      </div>
      {data && <textarea row={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
    </div>
    
  );
};

export default App;

<결과>

반응형