[ React / project3 ] Mypage '주문내역' 페이지 정렬(sort)

현재 Mypage의 상세 페이지를 만들고 보니 주문내역에서 기간 순서가에 이슈가 있어서 해결하려고 한다.

 

STAR(Situation - Task - Action - Result) 접근하기

1. Situtation

- 기간 정렬이 불명확함

 

2. Task

- 오늘(today) 기준, 가장 빠른 순서로 정렬하기

 

3. Action

Client에서 처리 예정 => 이유 : 프론트엔드라는 포지션상 server데이터를 접근하기 어려운 경우도 존재하기 때문에.

- 고려해본 사항 1 : Server에서 완성된 자료를 전달해 준다.
- 고려해본 사항 2 : 데이터 받아 Client에서 처리해 준다.

 

고려 사항1

Server에서 처리 장점 : 데이터가 이미 정제되어 있기 때문에 브라우저 등에서 자원을 사용하지 않을 수 있다.

 

고려사항2

Client에서 처리 장점 : Client에서 제가 직접 원하는 결과값을 얻을 수 있게 로직으로 처리 가능하다.

 

처리과정

 

Sort 이란?

arr.sort([compareFunction]);

 

compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다.

예를 들어 "바나나"는 "체리"앞에옵니다.
숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.

 

이론

function compare(a, b) {
if (a is less than b by some ordering criterion) { 
  return -1;
==> compareFunction(a, b) 이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
}
if (a is greater than b by the ordering criterion) {
  return 1;
==> compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다
}
// a must be equal to b
  return 0;
==> a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
}

 

적용 방법

1. new today를 만든다.

2. sort 함수를 만들고 new today와 비교한다.

3. 만들어진 결과 값을 가지고 변수에 담는다.

4. map으로 돌린다.

 

 

 

이슈 발생

브라우저에서 아래와 같은 에러 언급

TypeError: 0 is read-only,

sort 의 경우 immutable 이슈가 있는거 같다.

 

 

 

 

stackoverflow

That could be because sort mutates the array it works on (it sorts in-place).
If this.props.toys is immutable then it would throw that error.
Create a copy of the array and sort that.

참조 자료
https://stackoverflow.com/questions/49278578/reactjs-sorting-typeerror-0-is-read-only

 

이 글에서 추가적으로 알려준 사실 : toSorted method

Update 2023

ECMAScript 2023 introduced the .toSorted method of the array, which is the non-mutating version of .sort.

 

4. Result

해결 방식1 : sort method + useEffect + useState([])

 

해결 방식2 : toSorted method

 

 

해결방식 2번으로 간결하게 해결

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort