코드를 보면 PostContent에 dangerouslySetInnerHTML이라는 값을 설정해 주었습니다. 리액트에서는 <div>{html}</div>와 같이 HTML을 그대로 렌더링하는 형태로 JSX를 작성하면 HTML 태그가 적용되지 않고 일반 텍스트 형태로 나타나 버립니다. 따라서 HTML을 적용하고 싶다면 dangerouslySetInnerHTML이라는 props를 설정해 주어야 합니다.

그리고 지금은 태그를 렌더링하는 부분에 div 엘리먼트를 사용하고 있는데요. 추후 포스트 목록 페이지를 구현한 뒤에는 이 부분을 div가 아닌 Link 컴포넌트로 전환해 줄 것입니다.

컴포넌트를 다 만들었으면 해당 컴포넌트를 PostPage에서 HeaderContainer와 함께 렌더링하세요.

pages/PostPage.js

import React from 'react';
import HeaderContainer from '../containers/common/HeaderContainer';
import PostViewer from '../components/post/PostViewer';

const PostPage = () => {
  return (
    <>
      <HeaderContainer />
      <PostViewer />
    </>
  );
};

export default PostPage;

---