프로젝트를 진행하다 보면 데이터를 시간 순으로 정렬 할 때가 있다.

일반적으로 날짜, 시간에 따라 내림차 순 오름차 순으로 데이터를 정렬한다.

테스트 데이터

const data = [
  {
    user: 1,
    createDate: '2024-03-10'
  },
   {
    user: 2,
    createDate: '2024-02-11'
  },
  {
    user: 3,
    createDate: '2024-02-15
  },
   {
    user: 4,
    createDate: '2024-03-09
  },
   {
    user: 5,
    createDate: '2024-03-20
  },
]

오름차 순

과거에서 최신 날짜 순으로

new Date()를 사용하여 문자열로 입력된 날짜를 날짜 형태로 변환한 후 sort 함수를 이용하여 정렬 반환하는 방식이다.

기본 문법

arr.sort((a: number, b: number): number => {
    return a - b;
});

sort 비교 함수 a - b를 반환하는 이유

예시

const sortDate =data.sort((a, b) => {
  return new Date(a.createDate) - new Date(b.createDate);
});

console.log(sortDate)

/*
[{
  "user": 2,
  "createDate": "2024-02-11"
},
{
  "user": 3,
  "createDate": "2024-02-15"
},
{
  "user": 4,
  "createDate": "2024-03-09"
},
{
  "user": 1,
  "createDate": "2024-03-10"
},
{
  "user": 5,
  "createDate": "2024-03-20"
}]
*/

내림차 순

최신 날에서 과거 순으로

방법

기본 문법

arr.sort((a: number, b: number): number => {
    return b - a;
});

예시

const sortDate =data.sort((a, b) => {
  return new Date(a.createDate) - new Date(b.createDate);
});

// or
const sortDate =data.sort((a, b) => {
  return new Date(b.createDate) - new Date(a.createDate);
});

console.log(sortDate.reverse())

/*
[{
  "user": 5,
  "createDate": "2024-03-20"
},
{
  "user": 1,
  "createDate": "2024-03-10"
}, 
{
  "user": 4,
  "createDate": "2024-03-09"
},
{
  "user": 3,
  "createDate": "2024-02-15"
},
{
  "user": 2,
  "createDate": "2024-02-11"
}]
*/

참고