[프론트엔드] 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 호출 시간동안 화면에 보여줄 로딩 state 

 

try catch 문을 사용하여 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) {
        wdith: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
`;

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

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

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

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

export default NewsList;

 

 

2. 화면 결과

 

프로젝트를 실행하면 아래와 같이 뉴스 목록이 노출된다.