newsapi

[프론트엔드] REACT 뉴스 뷰어 만들기 [9]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [8] 1. usePromise 커스텀 hook 이번에는 usePromise 훅을 프로젝트에 적용해보려 한다. src 디렉토리 하단에 lib/usePromise 디렉토리 및 파일을 생성해준다. - usePromise.js 기본 API 상태를 관리해줄 파일을 만들어준다. promise 문을 사용하여 유틸 프로세스를 함수로 만들어서 재사용 할 수 있다. APi 호출 시 사용한 loading, 성공시에 결과값을 받을 resolved, API 오류 발생 시 넘겨받을 error 3가지 타입의 state 를 선언해주자 대기: loading을 보여주고 완료: 응답값을 반환 실패: error 타입을 반환해준다 . 완..

[프론트엔드] REACT 뉴스 뷰어 만들기 [8]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [7] 1. 리엑트 라우터 적용 이번에는 state로 관리했던 카테고리 값을 라우터로 변경해볼 예정이다. 먼저 라우터 라이브러리를 프로젝트에 설치한다. **주의사항 router 설치 시에 6.x.x 이상 버전을 설치하면 기존 라우터 사용 방식이 달라져서 오류가 발생하여 5.x.x 버전을 설치하고 진행한다. 관련 글은 아래애 있으니 참고 2022.03.15 - [프론트엔드/React] - [프론트엔드] React Router v6 업데이트 yarn add react-router-dom - index.js 해당 파일에 라우터를 적용한다. import React from 'react'; import Reac..

[프론트엔드] REACT 뉴스 뷰어 만들기 [7]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [6] 1. 활성화된 카테고리 API 지정하기 이번에는 지정한 카테고리로 변경될때 뉴스 API도 변경되도록 연동할 생각이다. 이전에 App.js "NewsList" 컴포넌트에 props로 category state를 넘겨준 적이 있다. props로 넘겨준 state로 APi만 호출하면 이제 NewsList가 API 변경시 자동으로 랜더링 된다. - NewsList.js NewsList 컴포넌트에 먼저 props로 전달해준 category state를 선언한다. 선언한 props 값에 따라 API를 호출할 수 있도록 query파라미터를 만들어서 API에 넣어준다. 기본 값이 'all'이면 빈값을 주어서 ..

[프론트엔드] REACT 뉴스 뷰어 만들기 [5]

ㅁ이전 글 2022.03.24 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [4] 1. 데이터 연동하기 이제 useEffect를 사용하여 컴포넌트가 처음 랜더링하는 시점에 API를 요청해야 한다. 여기서 주의점은 async를 useEffect 사용시에 붙여 사용하면 안된다는 점이다. 이유는 useEffect 반환하는 값이 뒷정리 목적의 함수이기 떄문이다. 따라서 async/await를 사용하려면 함수내부에서 처리를 해줘야 한다. - NewList.js API를 연동하여 아래와 같이 소스를 수정하도록 한다. API를 호출하여 map을 사용하여 컴포넌트에 API 배열 데이터를 props로 넘겨주자. articles : API 배열을 담을 state loading : API 호출..