외부 API를 연동해 뉴스 뷰어 만들기

axios

현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. Promise 기반으로 처리한다.

 

예시

불러오기 버튼을 누르면 JSONPlaceholder에서 제공하는 API를 호출하고 이에 대한 응답을 state에 넣어서 보여주는 예제이다.

뉴스 뷰어 예제

/src/components

-> Categories.js : 카테고리 출력

-> NewsItem.js : 단일 기사 출력

-> NewsList.js : 기사 리스트 출력

 

/src/lib

-> usePromise.js : promise 함수를 간결하게 처리하도록 도와준다.

 

/src/pages

-> NewsPage.js : 라우터 적용하도록 도와준다.

 

/src/App.js