14.6.2 API를 호출할 때 카테고리 지정하기

    지금은 뉴스 API를 요청할 때 따로 카테고리를 선택하지 않고 뉴스 목록을 불러오고 있습니다. NewsList 컴포넌트에서 현재 props로 받아 온 category에 따라 카테고리를 지정하여 API를 요청하도록 구현해 보세요.

    components/NewsList.js

    import React, { useState, useEffect } from 'react';
    import styled from 'styled-components';
    import NewsItem from './NewsItem';
    import axios from 'axios';
     
    const NewsListBlock = styled.div`
      (...)
    `;
     
    const NewsList = ({ category }) => {
      const [articles, setArticles] = useState(null);
      const [loading, setLoading] = useState(false);
     
      useEffect(() => {
        // async 사용하는 함수 따로 선언
        const fetchData = async () => {
          setLoading(true);
          try {
            const query = category === 'all' ? '' : `&category=${category}`;
            const response = await axios.get(
              `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=0a8c4202385d4ec1bb93b7e277b3c51f`,
            );
            setArticles(response.data.articles);
          } catch (e) {
            console.log(e);
          }
          setLoading(false);
        };
        fetchData();
      }, [category]);
     
      (...)
    };
     
    export default NewsList;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.