newsapi3 리액트로 뉴스뷰어 만들어 보기(4) 리액트 라우터로 뉴스 카테고리 페이지 만들어 봅니다. 라우터를 사용하기 위해 리액트-라우터를 설치합니다. >npm i react-router-dom 리액트 라우터를 적용할 때 만들어야 할 페이지는 단 하나입니다. src 디렉터리에 pages라는 디렉터리를 생성하고, 그 안에 NewsPage.js 파일을 다음과 같이 만듭니다. import { useParams } from 'react-router-dom'; import Categories from '../components/Categories'; import NewsList from '../components/NewsList'; const NewsPage = () => { const params = useParams(); // 카테고리가 선택되지 않았으면.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(2) 뉴스 API 데이터를 연동해보겠습니다. 컴포넌트가 보이는 시점에 API를 요청하면되는데 이때 useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 API를 요청합니다. 여기서 주의해야할 점은 useEffect에 등록하는 함수에 async를 붙이면 안됩니다. useEffect에서 반환해야 한느 값은 뒷정리 함수이기 때문입니다. 따라서 useEffect 내부에서 async/await 를 사용하려면 함수 내부에 async 키워드가 붙은 다른 함수를 만들어 사용합니다. API 요청이 대기 중인지 판별하기 위해 추가로 loading 이라는 상태도 관리하겠습니다. loagding 중일때는 true, 끝나면 false 로 변경합니다. import styled from 'styled-components'; impo.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(1) 비동기 방식 통신의 대표적인 API를 활용하는 예제로 newsapi 를 이용하여 전체 뉴스와 특정 카테고리 뉴스를 불러와서 보여주는 프로젝트를 만들어 봅니다. 1. newsapi key 발급받기 발급받은 API 키는 API를 요청할 때 API 주소의 쿼리 파라미터로 넣어서 사용하면 됩니다. 한국 뉴스를 가져오는 API 설명서는 아래의 링크에서 확인 가느합니다. https://newsapi.org/s/south-korea-news-api 전체 뉴스 불러오기 (예시) GET https://newsapi.org/v2/top-headlines?country=kr&apiKey=1ea3c5d642534097a4ae5a32303b16d8 특정 카테고리 뉴스 불러오기 (예시) GET https://newsapi.org.. 2023. 6. 5. 이전 1 다음 반응형
