그리고 PostList에서 받아 온 props에 따라 결과물을 보여 주세요.

    components/posts/PostList.js

    import React from 'react';
    import styled from 'styled-components';
    import { Link } from 'react-router-dom';
    import Responsive from '../common/Responsive';
    import Button from '../common/Button';
    import palette from '../../lib/styles/palette';
    import SubInfo from '../common/SubInfo';
    import Tags from '../common/Tags';
    
    (...)
    
    const PostItem = ({ post }) => {
      const { publishedDate, user, tags, title, body, _id } = post;
      return (
        <PostItemBlock>
          <h2>
            <Link to={`/@${user.username}/${_id}`}>{title}</Link>
          </h2>
          <SubInfo
            username={user.username}
            publishedDate={new Date(publishedDate)}
          />
          <Tags tags={tags} />
          <p>{body}</p>
        </PostItemBlock>
      );
    };
    
    const PostList = ({ posts, loading, error, showWriteButton }) => {
      // 에러 발생 
      if (error) {
        return <PostListBlock>에러가 발생했습니다.</PostListBlock>;
      }
    
      return (
        <PostListBlock>
          <WritePostButtonWrapper>
            {showWriteButton && (
              <Button cyan to="/write">
                  작성하기
              </Button>
            )}
          </WritePostButtonWrapper>
          {/*  로딩 중이 아니고, 포스트 배열이 존재할 때만 보여  */}
          {!loading && posts && (
            <div>
              {posts.map(post => (
                <PostItem post={post} key={post._id} />
              ))}
            </div>
          )}
        </PostListBlock>
      );
    };
    
    export default PostList;

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