axios 뉴스 뷰어 만들기

NewItem.js

const NewItem = ({ article }) => {
    const { title, description, url, urlToImage } = article;
    return (
        <NewsItemBlock>
            {urlToImage && (
                <div className="thumbnail">
                    <a href={url} target="_blank" rel="noopener noreferrer">
                        <img src={urlToImage} alt="thumbnail" />
                    </a>
                </div>
            )}
            <div className="contents">
                <h2>
                    <a href={url}>{title}</a>
                </h2>
                <p>{description}</p>
            </div>
        </NewsItemBlock>

NewsList.js

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

    useEffect(() => {
        const fatchData = async () => {
            try {
                const response = await axios.get(
                    "https://newsapi.org/v2/top-headlines?country=kr&apiKey=77c6e9b9c92b45bc838c388bec7a59df"
                );
                setArticles(response.data.articles);
            } catch (e) {
                console.log(e);
            }
        };
        fatchData();
    }, []);

  	//아직 데이터가 없을 때 null에는 map 함수가 없기 때문에 렌더링 오류 일어남
    if (!articles) {
        return null;
    }
    
    return (
        <NewListBlock>
            {articles.map((article) => (
                <NewItem key={article.url} article={article} />
            ))}
        </NewListBlock>
    );
};

export default NewsList;