PostViewer에 필요한 props를 넣어 주었으니, 해당 props를 PostViewer 컴포넌트에서 사용해 봅시다.

    components/post/PostViewer.js

    (...)
    const PostViewer = ({ post, error, loading }) => {
      // 에러 발생 
      if (error) {
        if (error.response && error.response.status = = = 404) {
          return <PostViewerBlock>존재하지 않는 포스트입니다.</PostViewerBlock>;
        }
        return <PostViewerBlock>오류 발생!</PostViewerBlock>;
      }
    
      // 로딩 중이거나 아직 포스트 데이터가 없을 
      if (loading || !post) {
        return null;
      }
    
      const { title, body, user, publishedDate, tags } = post;
      return (
        <PostViewerBlock>
          <PostHead>
            <h1>{title}</h1>
            <SubInfo>
              <span>
                <b>{user.username}</b>
              </span>
              <span>{new Date(publishedDate).toLocaleDateString()}</span>
            </SubInfo>
            <Tags>
              {tags.map(tag => (
                <div className=”tag”>#{tag}</div>
              ))}
            </Tags>
          </PostHead>
          <PostContent dangerouslySetInnerHTML={{ _ _html: body }} />
        </PostViewerBlock>
      );
    };
    
    export default PostViewer;

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