버튼 스타일을 수정한 후에는 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);

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