개발자로한걸음
435
2021-03-05 16:31:41
1
128

페이지만들때 순서가 자꾸 꼬입니다. (React, json.reverse )


리액트로 회사 사이트를 만들고 있는데 기사를 빠른 순서대로 쭉 넣는걸 하고 있습니다. node.js를 아직 쓸줄 몰라서, 일단은 json으로 입력하여 react로 받아오도록 코드를 작성했는데요. (NewsList.js) 

json 내용을 보면 이런식으로 최근 날짜가 뒤로 가게 작성했구요 react에서 불러올때는 news.reverse()해서 보여지는 순서를 바꿔서 사용했습니다. 

news.json 
[
{
 "no":"1" ,
"img":"[new1.png"]. 
"title" :"제목1".
"content" : [ '본문1' ], 
"date", " 2020.4월" 
},
{
 "no":"2" ,
"img":"[new1.png"]. 
"title" :"제목1".
"content" : [ '본문1' ], 
"date", " 2020.8월" 
},
{
 "no":"3" ,
"img":"[new1.png"]. 
"title" :"제목3".
"content" : [ '본문1' ], 
"date", " 2020.11월" 
},
{
 "no":"4" ,
"img":"[new1.png"]. 
"title" :"제목4".
"content" : [ '본문1' ,'본문2' ], 
"date", " 2020.12월" 
},
]



이제 뉴스가 길어질것을 대비해 페이지를 하단에 넣으려고하는데요.

paginate.js pagination.js 를 미리 만들고  NewsList.js에서 paginatie를 불러와서 페이지를 보여지는건 성공했는데...! 


순서가 이상하게 나오더라구요.

(가령 한페이지마다 2개씩 보여준다고치면, ) 

처음에는 페이지로 뉴스들의 개수를 자르고,  reverse로 돌려버리니 

1페이지 :  뉴스1 뉴스2 

2페이지 뉴스3 뉴스4   사진처럼 순서가 이상해지구요. 


이번에는 paginate 에서 몇 개씩 보여줄건지 결정하기전에 reverse로 순서를 바꿔서 넣어주니까, 뉴스 4, 3  2페이지에는 뉴스 3 뉴스 4가  재 등장합니다. 


제가 만들고 싶은건 최근 기사가 1부터 시작하는건데요 . 뭐가 문제일가요 ㅠㅠ



또, reverse로 뒤집어서 사이트에 뿌리면 성능에 안좋을까요? 

뉴스페이지에서 목록으로 갈때 순서가 다시 json순서로 돌아가긴하더라구요.... 

그냥 reverse 하지말고 매번 보도 자료 나올때마다 json 맨위에 더해주는게 맞을까요 ... 



NewsList.js 
const NewsList = ({ match }) => {
    const newsAsc = News.reverse();
    const getNews = () => {
        return News;  // News.json을 뜻함. 
    };
    const count = newsAsc.length;
    const [Article, setArticle] = useState({
        data: getNews(),
        pageSize: 3,
        currentPage: 1,
    });

    const handlePageChange = (page) => {
        setArticle({ ...Article, currentPage: page });
    };
    const { data, pageSize, currentPage } = Article;
    const pagedNews = paginate(data, currentPage, pageSize);

    return (
        <Wrap>
            <ul style={{ listStyle: 'none' }}>
                {pagedNews.map(({ no, img, title, content, date }) => (
                    <li key={no}>
                        <Link
                            to={`${match.url}/${no}`}
                        >
                            <Thumb src={img[0]} alt="img" />
                            <ContentWrap>
                                <Ptitle className="title">{title}</Ptitle>
                                
                                <P className="pc">
                                    {content[0].substring(0, 305)}...
                                </P>
                               
                                <Pdate className="date">{date}</Pdate>
                            </ContentWrap>
                        </Link>
                    </li>
                ))}
                <PageWrap>
                    <Pagination
                        pageSize={pageSize}
                        itemsCount={count}
                        currentPage={currentPage}
                        onPageChange={handlePageChange}
                    />
                </PageWrap>
            </ul>
        </Wrap>
    );
};

export default NewsList;



Pagination.js 
const Pagination = (props) => {
  const { itemsCount, pageSize,currentPage, onPageChange } = props; // 각각 아이템 개수, 한 페이지에 보여줄 아이템 개수
  const pageCount = Math.ceil(itemsCount / pageSize); // 몇 페이지가 필요한지 계산

  if (pageCount === 1) return null; // 1페이지 뿐이라면 페이지 수를 보여주지 않음

  const pages = _.range(1, pageCount + 1); // 마지막 페이지에 보여줄 컨텐츠를 위해 +1, https://lodash.com/docs/#range 참고
  
  return (
    <Nav> 
      <ul className="pagination">
      <li class="page-item">
              <a class="page-link" href="#"  tabindex="-1" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
        {pages.map(page => (
          <li key={page} 
          className={page === currentPage ? "page-item active" : "page-item"}
          style={{ cursor: "pointer" }}>
            <a className="page-link" onClick={() => onPageChange(page)} >{page}</a>
          </li>
        ))}
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>  
      </ul>
    </Nav>
  );
};

export default Pagination;


paginate.js

import _ from 'lodash';


export function paginate(items, pageNumber, pageSize) {
  const startIndex = (pageNumber - 1) * pageSize; // 자를 배열의 시작점

  return _(items)
    .slice(startIndex) // 시작점부터 배열을 자르되
    .take(pageSize) // pageSize만큼의 배열을 취함
    .value(); // lodash wrapper 객체를 regular 배열로 변환
}


0
  • 답변 1

  • kmksk
    1k
    2021-03-05 16:49:43

    뷰 코드는 최대한 단순하게 개발하는게 좋습니다. 보내주는데로 화면에 뿌려주고 페이징 기능을 먼저 구현하시기 바랍니다.

    그리고 보내주는 쪽에서 오른차순/내림차순 으로 보내는 방법으로 구현하시기 바랍니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.