sort() - 정렬 변경 기능

🔎 sort() 메서드
: 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환함

💡 반환 값에 따른 sort()함수의 해석
① 반환 값 < 0    = a가 b보다 앞에 있어야 함
② 반환 값 = 0    = a와 b의 순서를 바꾸지 않음
③ 반환 값 > 0    = b가 a보다 앞에 있어야 함

⭐ 콜백의 파라미터를 a,b라고 했을 때 활용법
◻ 작은 순서대로 정렬(오름차순):  numbers.sort((a,b) => a-b)
◻ 큰 순서대로 정렬(내림차순):  numbers.sort((a,b) => b-a)

 

✅ 최신순&추천순 버튼 클릭시 정렬이 변경되게  해보기

import ReviewList from "./ReviewList";
import items from "../mock.json"; // items라는 이름으로 mock.json파일을 import함
import { useState } from "react";

function App() {
  // 프로젝트의 최상위 컴포넌트
  const [order, setOrder] = useState("createdAt");
  const sortedItems = items.sort((a, b) => b[order] - a[order]); //order State값이 createdAt에 있을 때는 최신순으로 정렬되고, rating일 때는 평점이 높은 베스트순으로 정렬이 됨

  const handleNewClick = () => setOrder('createdAt');
  const handleBestClick = () => setOrder('rating');

  return (
    <div>
        <button onClick={handleNewClick}>최신순</button>
        <button onClick={handleBestClick}>추천순</button>
      <ReviewList items={sortedItems} />
    </div>
  );
}

export default App;