[React] 뉴스 뷰어 만들기

💻 결과화면

 

https://newsapi.org/ 에서 제공하는 API를 이용하여 카테고리별로 최신 뉴스 목록을 보여주는 뉴스 뷰어를 구현해 보았다.

 

📕 프로젝트 관련 개념

• 콜백 함수 : 자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법으로 함수 자체를 또 다른 함수의 인자로 전달해주는 것을 말한다.
• Promise : Promise는 콜백 지옥과 같은 코드가 형성되지 않게 하는 방안으로 .then을 사용하여 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다.

newsapi API 키 발급하기

- 전체 뉴스 불러오기
GET https://newsapi.org/v2/top-headlines?country=kr&apiKey=8602958015cb4cd9aebcd69bff10175b 

- 특정 카테고리 뉴스 불러오기
GET https://newsapi.org/v2/top-headlines?country=kr&
category=business&apiKey=8602958015cb4cd9aebcd69bff10175b

이렇게 api 주소의 키값이 달라지는 것을 이용해 카테고리 별로  뉴스를 불러올 수 있다.

 

useEffect에 등록하는 함수에는 async를 붙이면 안된다.

왜냐? useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다. 따라서 useEffect 내부에서 async/await를 사용하려면 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용한다.

 

style-components에서 '&' 선택자

'&'는 선택자로 사용되는 특수한 기호로써 상위 컴포넌트의 선택자를 참조할 수 있다. 이를 통해 스타일을 중첩하거나 조건부 스타일을 적용하는 등 다양한 스타일링 기법을 사용할 수 있다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.isActive ? 'blue' : 'gray'};
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.isActive ? 'darkblue' : 'darkgray'};
  }
`;

여기서 '&'는 상위 컴포넌트인 Button을 참조하고 버튼에 hover했을 때의  스타일을 정의한다.

 

📒프로젝트 깃허브 주소

https://github.com/devuoon/0801