1. axios로 API 호출해서 데이터 받아오기
axios는 자바스크립트 HTTP 클라이언트이다.
axios 라이브러리는 HTTP요청을 Promise 기반으로 처리한다.
참고로 Promise는 콜백지옥 코드가 생성되지 않도록하는 기능이다.
// axios 라이브러리 다운
$ yarn add axios
axios.get 함수는 파라미터로 전달받은 주소에 GET요청을 보내고, 그 결과를 .then을 통해 비동기적으로 확인할 수 있다.
get으로 가져온 주소는 해당 주소에서 가짜 API를 호출해준다.
2. newsapi API 키 발급받기
이번 실습에서는 newsapi에서 제공하는 API를 사용해서 최신 뉴스를 불러오고 나타낼 것인데, 이를 위해서는 키를 발급 받아야 한다.
발급받은 API키는 API를 요청할 때 주소의 쿼리 파라미터로 넣어서 사용한다.
3. 뉴스 뷰어 UI & 데이터 연동
뉴스의 제목, 내용, 링크, 뉴스 이미지를 나타내고자 한다.
styled-components를 이용할 것이므로 해당 컴포넌트를 다운받아야 한다.
// styled-components 다운
$ yarn add styled-components
(1) NewsItem.js
각 뉴스 정보를 보여주는 컴포넌트
props로 article 객체를 받아와서 사용한다.
NewsList 컴포넌트에서 NewsItem 컴포넌트로 article객체를 넘기는 모습은 아래와 같다
(2) NewsList.js
API를 요청하고 뉴스 데이터 배열을 컴포넌트 배열로 변환해서 렌더링 하는 컴포넌트
useEffect를 사용해서 컴포넌트가 처음 렌더링 될 때 API를 요청하고자 한다.
다만, useEffect의 반환값은 뒷정리 함수 이므로 useEffect에 등록하는 함수에 async를 붙이면 안된다.
만약에 useEffect 내부에서 async/wait를 사용하고 싶다면 함수내부에 async 키워드가 붙은 또 다른 함수를 아래와 같이 만들어야 한다.
4. 뉴스 카테고리 선택
(1) UI
newsapi에서 확인할 수 있듯이, 뉴스 카테고리는 business, science, entertainment, sports, health, technology 이렇게 총 6개다.
Categories 컴포넌트를 새롭게 만들고, 파일에 카테고리 6개에 해당하는 배열을 만들어서 렌더링 해주면 된다. UI는 아래와 같이 나왔으니, 기능을 완성해야 한다.
(2) 기능
사용자가 선택한 카테고리에 따라 API를 요청하는 주소가 동적으로 바뀌어야 한다.
사용자가, 전체보기를 누르면 쿼리 값을 공백으로 두고 그 외에는 선택한 카테고리 값에 따라 "&category=선택값"의 형태로 쿼리를 만들어서 요청을 보냈다.
카테고리 값이 바뀔때마다 뉴스를 새로 불러와야 하기 때문에 useEffect의 두번째 파라미터에 카테고리를 넣어줘야 한다. 아래와 같이 useEffect 코드를 변경했다.
건강 카테고리를 눌렀을 때와 기술 카테고리를 눌렀을 때 각 카테고리에 맞는 뉴스 리스트가 보인다.
5. 리액트 라우터 적용
기존에는 카테고리 값을 useState로 관리했는데, 이를 리액트 라우터의 URL 파라미터로 관리할 수 있다.
NewsPage.js 파일 하나 만들어서 라우터를 적용하면, 선택된 카테고리값은 url 파라미터로 알 수 있기 때문에 굳이 카테고리 컴포넌트에서 선택된 카테고리가 뭔지 알려줄 필요가 없다.
