React - API

외부 API연동 후 SPA 페이지 제작

axios로 api로 호출해서 데이터 받아오기 -> newsapi API 키 발급받기 -> 뉴스 UI만들기 -> 데이터 연동 -> 카테고리 기능 구현 -> 라우터 적용하여 템플릿 제작

• axios 라이브러리 설치
  
• prettier 추가
  
• App.js
  
• JSON.stringify
  
  JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.

async aways

• App.js 수정
  비동기 데이터 받아올 때 promise 객체 타입을 사용한 내용

newsAPI 가져오기

https://newsapi.org/

• 전체 뉴스를 가져오는 경우
  https://newsapi.org/v2/top-headlines?country=kr&apiKey=efbb02d1cad14f4d97156acbc15b4074
• 카테고리별로 가져오는 경우
  https://newsapi.org/v2/top-headlines?country=kr&category=business&apiKey=efbb02d1cad14f4d97156acbc15b4074
• App.js에 입력
  
• 결과
  

뉴스 UI 구성

• styled-components 라이브러리 설치
  yarn add styled-components
  -> src 안에 components 디렉터리 생성
  -> NewsItem.js 생성(각 뉴스 정보를 보여주는 컴포넌트)
  -> NewsList.js 생성(API를 요청하고 뉴스 데이터가 들어있는 배열을 컴포넌트 배열로 변환해서 렌더링해주는 컴포넌트)
  
• "title": 제목
• "description": 내용
• "url": 링크
• "urlToImage": 뉴스 이미지
  
• noopener는 웹 사이트의 보안을 강화하고 다른 웹 사이트가 브라우저 세션을 통해 페이지에 액세스하는 것을 방지하는 데 필요합니다.
• noreferrer는 추천 정보가 대상 웹 사이트로 전달되지 않도록 보호하는 데 사용되며 Google 웹 로그 분석에서 추천 트래픽도 숨 깁니다.
• a 태그에서 target="_blank"로 새로운 페이지로 새창열기를 할 때 보안상의 취약점이 생기고 광고가 업로드 되는 문제가 있는데 이 두가지를 해결하기 위해 사용된다.

NewsList.js

api를 요청 (아직 데이터르 불러오지 않고 가짜데이터를 먼저 보이게 한 후 배치나 구성이 정확하게 되어있는지 먼저 확인해 보자)

• NewsList.js 입력
  
• App.js 수정
  
• 결과
  

NewsList에 데이터 연동

페이지가 로드되는 순간 데이터를 받아와야 한다- useEffect
요청이 대기 중일때는 loading겂아 true 되고 요청이 끝나면 loading이 false.

• NewsList.js 수정
  
• 결과
  

카테고리 기능 구형

화면에 카테고리를 보여 줄때는 영어로 된 값을 그대로 보여주지 않고 한글로 보여준 뒤 클릭했을때 영어로 된 카테고리 값을 사용하도록 구현

• Categories.js 생성
  
  
• NewsList.js 수정
  
  category 값을 업데이트하는 onSelect 함수로 만들어준다.
  그리고 나서category와 onSelect 함수를 Catagories 컴포넌트에게 props로 전달해준다(Categories의 c.name값을 받아오게 된다)
  또, category값을 NewsList 컴포넌트에게도 전달해 줘야한다.

리액트 라우터 적용하기

• git을 통해 yarn add react-router-dom 입력하여 설치
  
• index.js 수정 (라우터로 App을 감싸준다)
  

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• App.js 수정(라우트처리)
  
• Categories에서 기존의 onSelect함수(카테고리 키 선택하고 선택된 카테고리에 다른 스타일을 주는 기능)를 NavLink로 대체.
• Categories.js 수정
  
  
  

커스텀 훅을 만들어보자!

• API호출할 때 Promise 사용하는데 있어 우리가 커스텀훅을 만들어 리팩토링을 진행해 본다.
• 이름을 usePromise으로 지정.
• src 디렉터리 내에 lib 디렉터리 내에 usePromise.js 생성
  loading, resolved, error
• usePromise.js 생성
  
• NewsList.js 수정