더북(TheBook)

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 컴포넌트는 꽤 간단하지요? 이 컴포넌트는 titlemarkdownprops로 받아 와 보여 줍니다. 받아 온 값은 나중에 렌더링하고, 지금은 텍스트를 바로 렌더링하겠습니다.

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