과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기

상황

api로 받아 온 데이터가 id별이나 작성순서대로, 순서대로 작성이 되어 있다고 가정했을 때

1번 row는 가장 오래된 데이터일 것이다. 따라서 이 데이터를  map 메서드 등을 통해 렌더링 하면 화면에는 과거 순으로 렌더링 된다.

 

이것을 렌더링 할 때 데이터를 거꾸로 렌더링하고, 이후부터 토글 버튼을 누르면 과거순/최신순으로 바뀌면서 렌더링 되도록 구현 해보고자 한다.

방법

상태 만들기

import { useState } from 'react';


function SponsorList() {

  const [isAsc, setIsAsc] = useState(false);
  
  ...

상태의 초기값을 true로 주면 아래 이어지는 로직에서는 데이터가 생성된 순서대로 렌더링 되기 때문에 화면에는 역순으로 보인다.

기존 데이터 배열을 reverse 하기

const filteredData = filterSponsorData(data); // 기존 데이터 배열
const sortedData = isAsc ? filteredData : [...filteredData].reverse(); // 리버스하기

기존 데이터 배열을 reverse 메서드로 뒤집어 주며 새로운 배열로 만든다.

토글 버튼에 이벤트 핸들러로 상태 변경 함수 연결하기

<Button variant="secondary" onClick={() => setIsAsc(!isAsc)}>
  {isAsc ? '최신순' : '과거순'}
</Button>