[프론트엔드] 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'이면 빈값을 주어서 전체 리스트를 가져오고 빈값이 아니면 props값을 파라미터로 API를 호출한다.

 

 

- 전체 로직  흐름도  

 

1. App.js 에서 사용한 useCallback을 통해서 최적화와 자식컴포넌트에서 함수의 재사용이 가능하다. 
   카테고리를 클릭하면  "onSelect" 함수가 동작해서 App.js state가 동적으로 변경된다.
2. 변경된 state는 NewsList 컴포넌트에서 useEffect가  props가 변경된 것을 감지해서 API를 다시 호출하게 된다. 
3. 다시 호출된 API는 호출 시간동안 로딩 화면을 보여주고 호출이 끝나면 다시 뉴스뷰어를 보여주게 된다.

 

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import NewsItem from "./NewsItem"
import axios from "axios";

const NewsItemBlock = styled.div`
    box-sizing: border-box;
    padding-bottom: 3rem;
    width: 768px;
    margin: 0 auto;
    margin-top: 2rem;
    @media screen and (max-width: 768px) {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
`;

const NewsList = ({category} ) => {
    const [ articles, setArticles ] = useState(null);
    const [ loading , setLoading ] = useState(null);

    useEffect(() => {
        // async 비동기 함수호출
        const fetchData = async () => {
            // APi 호출 시간동안 보여줄 로딩바
            setLoading(true)
            // try catch문 에러 처리
            try {
                // props로 넘어온 state로 
                const query = category === 'all' ? '' : `&category=${category}`;
                const response = await axios.get(
                    `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=afda249a1ccb482fa0944d12a295021b`,
                );
                // API 데이터 state 저장
                setArticles(response.data.articles)
            } catch (e) {
                console.log(e)
            }
            setLoading(false)
        };
        fetchData();
    }, [category]);

    // 대기 중
    if (loading) {
        return <NewsItemBlock>대기 중입니다...</NewsItemBlock>
    }
    // articles 값이 설정 안될경우 (null 오류방지)
    if (!articles) {
        return null;
    }

    // articles 같이 유효할 떄
    return (
        <NewsItemBlock>
            {articles.map(v =>  (
                <NewsItem key={v.url} article={v} />
            ))}
        </NewsItemBlock>
    );
};

export default NewsList;

 

 

2. 화면 결과

 

이제 프로젝트에서  카테고리를 클릭하면 뉴스가 다시 로딩되어 노출된다.