20.5.4 PreviewPane 컴포넌트

에디터 페이지의 마지막 컴포넌트인 PreviewPane을 만들어 봅시다.

src/components/editor/PreviewPane/PreviewPane.js

import React from ‘react’;
import styles from ‘./PreviewPane.scss’;
import classNames from ‘classnames/bind’;
 
const cx = classNames.bind(styles);
 
const PreviewPane = ({markdown, title}) => (
  <div className={cx(‘preview-pane’)}>
    <h1 className={cx(‘title’)}>
      제목
    </h1>
    <div>
      내용
    </div>
  </div>
);
 
export default PreviewPane;

PreviewPane 컴포넌트는 꽤 간단하지요? 이 컴포넌트는 title과 markdown을 props로 받아 와 보여 줍니다. 받아 온 값은 나중에 렌더링하고, 지금은 텍스트를 바로 렌더링하겠습니다.