[React] sort 함수를 활용한 데이터 정렬 방법과 state 연동하기

sort 함수로 정렬 바꾸기

=> sort는 기본적으로 아무것도 적지않으면 오름차순을 정렬시킨다. (한글, 영어, 숫자 모두)

하지만 숫자는 1, 5, 7, 9, 10 이라는 숫자가 있을때, 컴퓨터는 10이라는 숫자를 10으로 인식하지 못한다.

첫글자만 보고 1, 10, 5, 7, 9로 정렬함.

 

숫자 데이터의 정렬을 만들던 중...

📌작성코드

import { useState } from "react";
import ReviewList from "./components/ReviewList";
import items from "./mock.json";

const App = () => {
  const [order, setOrder] = useState("createdAt");
  const sortedItems = items.sort((a, b) => b[order] - a[order]);
  const handleNewClick = () => {
    setOrder("createdAt");
  };

  const handleBestClick = () => {
    setOrder("rating");
  };

  return (
    <div>
      <div>
        <button onClick={handleNewClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} />
    </div>
  );
};
export default App;

 

sort()를 사용하여 내림차순으로 정렬하고 있다. 

정렬된 값을 state를 만들어 order에 저장.

b[order] - a[order]를 넣어주었다.

여기서 객체의 접근 방식을 알아보면?

. 닷노테이션과 [] 브라켓노테이션 두가지 방법이 있고

[] 브라켓 노테이션의 경우 반드시 '스트링' 따옴표로 감싸주어야 한다.

(숫자 일 땐 생략가능)

그럼 위의 코드에서는 왜? 따옴표를 안썼을까?

여기 b[order] 대괄호 안의 내용은 '변수'이다.

바로 state에서 선언된 변수!

그 변수 이름을 브라켓노테이션으로 감싸는 것 뿐. 때문에 

"따옴표로 감 쌀 이유가 없음"

 

마지막으로 사용자들이 state값을 선택할 수 있게 만들기위해

핸들러함수에 order값을 각각 "createdAt" "rating"으로 넣고,

버튼의 onClick 함수에 연결하였다.

 

🙌완성!

 

자바스크립트 딥다이브 130p 10.5 프로퍼티 접근 참고