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));
'[Study] 개발 공부 > [React] 리액트 공부' 카테고리의 다른 글
왜 React 최신 버전에서는 import React가 필요 없을까? (0) | 2025.02.13 |
---|---|
[React-redux] ToDo List 로컬스토리지로 관리하기 (0) | 2025.02.05 |
[React] dangerouslySetInnerHTML: DOM에서 innerHTML 사용하기 (0) | 2024.12.10 |
[React] Lenis로 부드러운 스크롤 효과 추가하기 (1) | 2024.11.28 |
[React] react-copy-to-clipboard: 클립보드 복사 기능 구현하기 (0) | 2024.11.25 |