👻들어가며

<리액트를 다루는 기술> 14장 외부 API를 연동하며 뉴스 뷰어 만들기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다.

💥news API의 단점(필독)

홈페이지

에 들어가보면 무료 개발자 플랜은 로컬호스트 같은 개발 환경에만 적용되고 외부 환경에서 적용하려면 돈을 내야함... 실화냐? 그래서 깃헙 페이지로 퍼블리싱하면 아무것도 안뜸..

✨ 앱의 컴포넌트 구조

props까지 보면 이런 느낌입니다.

🖋 NewsItem

• 뉴스 항목을 담당하는 컴포넌트입니다.
• 기사 데이터로 article을 props받아와서 title, description, url, urlToImage을 각 태그에 넣어줍니다.

function NewsItem({article}){
    // article을 prop로 받아온다.
    // article에는 'title', 'description', 'url', 'urlToImage'의 정보가 들어있음
    const { title, description, url, urlToImage} = article;
    //구조 분해를 이용해서 article.title → title로 할당하기
    return (
        <NewsItemBlock>
            {/* urlToImage가 있는 경우: 썸네일 요소 형성 */}
            {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} target="_blank" rel="noopener noreferrer">
                        {title}
                    </a>
                </h2>
                {/* 설명 */}
                <p>{description}</p>
            </div>
        </NewsItemBlock>
    )
}

스타일드 컴포넌트

import styled from "styled-components";

const NewsItemBlock = styled.div`
display: flex;
.thumbnail {
    margin-right: 1rem;
    img {
        display: block;
        width: 160px;
        height: 100px;
        object-fit: cover;
    }
}
.contents {
    h2{
        margin: 0;
        a {
            color: black
        }
    }
    p {
        margin: 0;
        line-height: 1.5;
        margin-top: 0.5rem;
        white-space: normal;
    }
}
& + & {
    margin-top: 3rem;
}
`;

🖋 NewsList

리팩토링 전

• 해당 페이지의 카테고리를 props로 받아옵니다.
• axios를 이용해 API를 호출하고 각 데이터를 map 메서드를 통해 NewsItem 컴포넌트로 가공합니다.