버튼 스타일을 수정한 후에는 Pagination 컴포넌트를 위한 컨테이너인 PaginationContainer 컴포넌트를 만드세요.
containers/posts/PaginationContainer.js
import React from 'react'; import Pagination from '../../components/posts/Pagination'; import { useSelector } from 'react-redux'; import { withRouter } from 'react-router-dom'; import qs from 'qs'; const PaginationContainer = ({ location }) => { const { lastPage, posts, loading } = useSelector(({ posts, loading }) => ({ lastPage: posts.lastPage, posts: posts.posts, loading: loading['posts/LIST_POSTS'], })); // 포스트 데이터가 없거나 로딩 중이면 아무것도 보여 주지 않음 if (!posts || loading) return null; // page가 없으면 1을 기본값으로 사용 const { tag, username, page = 1 } = qs.parse(location.search, { ignoreQueryPrefix: true, }); return ( <Pagination tag={tag} username={username} page={parseInt(page, 10)} lastPage={lastPage} /> ); }; export default withRouter(PaginationContainer);