Array.prototype.sort()
이번 기업과제에서 조건에 따른 데이터 필터링을 맡았다.
대부분의 데이터가 숫자로 되어있어서
Array.prototype.sort((a, b) => b - a) 메소드로 내림차순 정렬을 생각하였다.
그런데 sort의 특징 중 하나인 '원본배열을 직접 변경하며 정렬된 배열을 반환한다.' 에
부딪혀 에러를 만나게 되었다.
✋일단 sort에 대해 정리해보자.
compareFunction 이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬된다.
sort는 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.
a와 b가 비교되는 두 요소라면,
'바나나', '체리' 를 비교하면 '바나나' 가 앞에오지만
9와 80을 비교하게 되면 숫자정렬에서는 문지열로 변환되기 떄문에 '80'은 유니코드 순서에서
'9'앞에 위치하게 된다.
자세한 설명👉https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
sort 함수 내 compareFunction 동작
function compare(a,b){
if(a > b) return 1; // return value > 0 이므로 a는 b뒤에 옵니다.
if(a < b) return -1; // return value < 0 이므로 a는 b 앞에 옵니다.
return 0; // a와 b를 그대로 유지합니다.
}error
if (e.target.matches('.byDate')) {
dispatch(sortByDate());
}리덕스에 담긴 원본 데이터를 조건에 따라 sort 해주는데 redux state는 정상적으로
변경되지만 컴포넌트가 리렌더링 되지 않는 문제 발생
initialState.js
initialState = {
data:data
}알고보니 reducer에서
case SORT_BY_DATE: {
return {
...state,
data: state.data.sort((a, b) => b.createDt - a.createDt);
};
}initialState에 있는 원본배열을 직접변경해서 생긴 문제였다.
case SORT_BY_DATE: {
const data = [...state.data];
data.sort((a, b) => b.createDt - a.createDt);
return {
...state,
data,
};
}[...state.data] 와 같이 원본배열을 복사해서 사용하니까 해결되었다.
원본배열은 직접 변경하면 작동 되지않는다.
아마 객체의 주소값을 비교하여 변경된걸 알 수 있다고 기억하는데
더 자세한 내용은 좀 더 찾아보고 추가로 포스팅 하려고 한다!
