본문 바로가기
[Study] 개발 공부/[React] 리액트 공부

sort를 사용한 특수 조건 우선 정렬

by 지공A 2025. 1. 3.

sort 사용법 관련해서 공부가 필요해서 정리

 

목표: Post의 특정 조건(예: 북마크)을 가장 우선적으로 비교하고, 그 후 시간 비교(최신순)를 수행한다.

 

북마크가  최우선 정렬되어야 하며, 북마크끼리도 시간순 정렬이 되어야한다.

 

 

Q1: new Date에서 getTime()을 해야하는 이유?

A1: new Date는 Date 객체로만 바꿔줄 뿐이고 비교는 불가. getTime()을 사용하면 날짜를 숫자 값으로 변환하여, 두 날짜의 차이를 정확하게 비교할 수 있다.

type Post = {
  id: number;
  title: string;
  upload_date: string; // 날짜는 ISO 8601 형식의 문자열
  bookmark: boolean; // 북마크 여부
};

// 예제 데이터
const posts: Post[] = [
  { id: 1, title: "Post A", upload_date: "2025-01-02", bookmark: false },
  { id: 2, title: "Post B", upload_date: "2025-01-01", bookmark: true },
  { id: 3, title: "Post C", upload_date: "2025-01-03", bookmark: false },
  { id: 4, title: "Post D", upload_date: "2025-01-01", bookmark: true },
];

// 정렬 함수
const sortByBookmarkAndDate = (posts: Post[]) => {
  const sortedPosts = [...posts];  // 원본 배열을 변경하지 않도록 복사본 생성

  // 북마크 우선 정렬
  sortedPosts.sort((a, b) => {
    if (b.bookmark !== a.bookmark) {
      return b.bookmark ? 1 : -1;  // 북마크가 있는 게시물이 앞에 오도록 처리
    }

    // 날짜 비교 (날짜가 최신순으로 오게)
    const dateA = new Date(a.upload_date).getTime();
    const dateB = new Date(b.upload_date).getTime();
    return dateB - dateA;  // 내림차순 정렬
  });

  return sortedPosts;  // 정렬된 배열을 반환
};

// 결과를 확인하고 싶다면 콘솔창에 찍어보자
console.log(sortByBookmarkAndDate(posts));