더북(TheBook)

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;

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