현재 재고관리 어플리케이션 을 만들고 있다. 가장 기초적인 기능은 구현 하였고, 지금은 작은 기능들을 더하고 완성도 를 높이는 작업을 하고 있다. 오늘은 데이터를 날짜순으로 정렬 기능을 토글(toggle)방식으로 구현 했는데 복습해보자.
1. sort
js higher order function 중 하나인 sort를 사용해보자. MDN 예제를 먼저 보자.
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 4, 5]하지만, 날짜 같은 경우에는 내가 쓰는 데이터가 string 이기 때문에 날짜로 만들어 주어야 한다. 밑에 처럼 말이다.
inventory.sort((a, b) => {
return new Date(b.expiration_date) - new Date(a.expiration_date)
})2. typescript safe
타입스크립트를 사용한다면 타입스크립트에게 조금 더 명확하게 해주어야 한다.
inventory.sort((a: Inventory, b:Inventory) => {
return new Date(b.expiration_date).valueOf() - new Date(a.expiration_date).valueOf()
})// 타입스크립트는 '-' operator를 사용하는데 날짜를 사용하는것을 좋아하지 않기 때문에 valueOf()를 사용하여 숫자로 만들어준다.
(b - a)로 두었으니 가장 최근 날짜부터 정렬이 되고, (a - b)로 두면 가장 오래된 날짜부터 정렬이 된다.
3. setState
sort만 돌리면 정렬은 되지만 rendering은 되지 않는다. setState를 이용해 정렬이 된 데이터를 넣어주자. sort는 array자체를 변형(mutate)시키기 때문에 slice를 이용해 새로운 변수를 만들어 이용하자.
const sortedInventory = inventory
.slice(0)
.sort((a: Inventory, b:Inventory) => {
return new Date(b.expiration_date).valueOf() - new
Date(a.expiration_date).valueOf()
})setInventory(sortedInventory)
이렇게 하면 정렬이 된 데이터가 렌더링이 된다.
4. toggle
마지막으로 ux를 위해 사용자가 정렬을 양방향으로 toggle 할 수 있도록 만들자. 여기부터는 정말 많은 방법이 있겠지만 나는 이 방식을 선택했다.
오름차순으로 할지 내림차순으로 할지 array의 첫번째와 마지막 데이터를 비교한 후 정렬을 하면 된다. 이렇게 되면 버튼을 따로 두 개 만들 필요 없이 토글하여 무한 오름차순/내림차순 변경을 할 수 있다.
5. demo
테이블 헤더에 온클릭을 붙이면 아래와 같이 작동한다!
