반응형
1. https://newsapi.org/register에 가입합니다.
가입 완료시 나오는 API Key를 저장해둡시다. 나중에 API 요청할 때 써먹어야 합니다.
2. 한국 Link에 들어가봅니다.
https://newsapi.org/s/south-korea-news-api
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;
<결과>
반응형
'Programming > React' 카테고리의 다른 글
Recoil 따라하기 - TodoList (0) | 2021.05.28 |
---|---|
Nodejs V14 ESM 문법 적용하기 - 리액트를 다루는 기술 backend 주의점 (0) | 2021.04.10 |
Storybook 사용하기 (0) | 2021.03.18 |
MongoDB 다운로드 설치 및 Compass 연결 (0) | 2021.03.07 |
React - Apache에 배포하기 (0) | 2021.02.27 |