사실 이 컴포넌트에서 StyledButton을 바로 내보내도 상관없습니다. 하지만 굳이 Button 리액트 컴포넌트를 만들어서 그 안에 StyledButton을 렌더링해 준 이유는 추후 이 컴포넌트를 사용할 때 자동 import가 되게 하기 위해서입니다. styled-components로 만든 컴포넌트를 바로 내보내면 자동 import가 제대로 작동하지 않습니다.

Button 컴포넌트를 만드는 과정에서 {…props}를 StyledButton에 설정해 주었는데요. 이는 Button이 받아 오는 props를 모두 StyledButton에 전달한다는 의미입니다.

컴포넌트를 다 만들었으면 이 컴포넌트를 PostListPage 컴포넌트에서 렌더링해 보세요.

pages/PostListPage.js

import React from 'react';
import Button from '../components/common/Button';

const PostListPage = () => {
  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
};

export default PostListPage;

---