더북(TheBook)

20.3.1 ListWrapper 컴포넌트

 

ListWrapper 컴포넌트는 내부 내용을 페이지 한가운데에 정렬시켜 주고, 위아래에 패딩이 설정되어 있으며, 웹 브라우저 크기에 따라 화면 크기를 조정합니다. 컴포넌트를 감싸는 역할을 하므로, 내부에 children을 렌더링하세요.

src/components/list/ListWrapper/ListWrapper.js

import React from ‘react’;
import styles from ‘./ListWrapper.scss’;
import classNames from ‘classnames/bind’;
 
const cx = classNames.bind(styles);
 
const ListWrapper = ({children}) => (
  <div className={cx(‘list-wrapper’)}>
    {children}
  </div>
);
 
export default ListWrapper;

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