14.4.2 NewsList 만들기

    이번에는 NewsList 컴포넌트를 만들어 보겠습니다. 나중에 이 컴포넌트에서 API를 요청하게 될 텐데요. 지금은 아직 데이터를 불러오지 않고 있으니 sampleArticle이라는 객체에 미리 예시 데이터를 넣은 후 각 컴포넌트에 전달하여 가짜 내용이 보이게 해 보세요.

    components/NewsList.js

    import React from 'react';
    import styled from 'styled-components';
    import NewsItem from './NewsItem';
     
    const NewsListBlock = 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 sampleArticle = {
      title: '제목',
      description: '내용',
      url: 'https://google.com',
      urlToImage: 'https://via.placeholder.com/160',
    };
     
    const NewsList = () => {
      return (
        <NewsListBlock>
          <NewsItem article={sampleArticle} />
          <NewsItem article={sampleArticle} />
          <NewsItem article={sampleArticle} />
          <NewsItem article={sampleArticle} />
          <NewsItem article={sampleArticle} />
          <NewsItem article={sampleArticle} />
        </NewsListBlock>
      );
    };
     
    export default NewsList;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.