[프론트엔드] REACT 뉴스 뷰어 만들기 [4]

이전 글

• 2022.03.24 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [3]

 

1.  UI 만들기

 

스타일 컴포넌트 라이브러리를 추가해주자.

 

yarn-add styled-components

 

 

src 디렉토리 하단의

• NewsItem.js 
• NewsList.js

두개를 파일을 추가한다.

 

 

- NewsItem.js

 

author: "정규묵"

content: ""

description: "일본이 호주를 꺾고 카타르 월드컵 본선 진출을 확정했습니다. 일본은 호주에서 열린 카타르 월드컵 아시아 최종예선 B조 9차전에서 후반 44분과 추가 시간에 터진 연속골로 2대0으로..."

publishedAt: "2022-03-24T12:02:50Z"

source: {id: null, name: "Imbc.com"}

id: null

name: "Imbc.com"

title: "일본, 호주 꺾고 카타르 월드컵 본선 진출 - MBC뉴스"

url: "https://imnews.imbc.com/news/2022/sports/article/6353179_35701.html"

urlToImage: "https://image.imnews.imbc.com/news/2022/sports/article/__icsFiles/afieldfile/2022/03/24/PCA_20220324_04.jpg"

 

 

 

위의 API에서 다음 파라미터를 사용할 예정이다.

• title: 제목
• description: 내용
• url: 링크 
• urlToImage: 뉴스 이미지

 

 

NewsItem 컴포넌트를 아래와 같이 작성한다.

 

 

import React from "react";
import styled from "styled-components";

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

const NewsItem = ({ 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} target="_blank" rel="noopener noreferrer" >
                        {title}
                    </a>
                </h2>
                <p>{description}</p>
            </div>
        </NewsItemBlock>
    );
};

export default NewsItem

 

 

- NewsList.js

 

import React from "react";
import styled from "styled-components";
import NewsItem from "./NewsItem"

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 sampleArticle = {
    title: '제목',
    description: '내용', 
    url: 'https://google.com', 
    urlToImage: 'https://via.placeholder.com/160',
};

const NewsList = () => {
    return (
        <NewsItemBlock>
            <NewsItem article={sampleArticle}/>
            <NewsItem article={sampleArticle}/>
            <NewsItem article={sampleArticle}/>
            <NewsItem article={sampleArticle}/>
            <NewsItem article={sampleArticle}/>
            <NewsItem article={sampleArticle}/>
        </NewsItemBlock>
    );
};

export default NewsList;

 

- App.js

 

import React from 'react';
import NewsList from './components/NewsList';

const App = () => {
  return <NewsList />;
}

export default App

 

 

2.  화면 결과

 

프로젝트를 실행하면 아래와 같이 컴포넌트가 나타나는 것을 확인 할 수 있다.