[React] 2-1. array state 정렬하기 ( .sort()활용)

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

 

 

array state를 정렬하고 싶을 때는 어떻게 해야할까?

가장 보편적인 방법인 sort()메서드를 이용해보자.

 

1. sort() 활용하여 array state 정렬하기

 

let [music, setMusic] = useState(
    [{"type": "Rock", "title": "Summer", "singer": "The Volunteers", "thumbs": 0},
    {"type": "HipHop", "title": "그 해 여름", "singer": "유토", "thumbs": 0},
    {"type": "Dance", "title": "Hype Boy", "singer": "New Jeans", "thumbs": 0},
    {"type": "Rock", "title": "Mercurial", "singer": "실리카겔", "thumbs": 0},
    {"type": "Dance", "title": "Spicy", "singer": "aespa", "thumbs": 0},
    {"type": "HipHop", "title": "Circle", "singer": "Post Malone", "thumbs": 0},
    ])

 

결과화면

위의 array state에 정의된 순서대로 리스트가 렌더링된 모습이다.

 

이를 ABC 버튼을 통해 노래제목의 이름순으로 정렬해보자!

 

1) sort()

arr.sort(비교함수)

(1) 매개변수

sort() 메서드는 비교함수를 매개변수로 전달받는다.

이를 바탕으로 array내 요소를 정렬하고 반환한다.

만약 생략이 된다면, 각 요소를 문자열로 변환한 후 유니코드 포인트 값에 따라 정렬한다.

 

(2) 반환값

정렬된 array

이때 주의할 점은 복사본을 생성하는 것이 아닌 원본을 정렬한다.

 

(3) 비교함수

arr.sort((a,b)=>{
  if(a가 b보다 먼저 와야하는 경우) return -1;
  if(a가 b보다 나중에 와야하는 경우) return 1;
  return 0; //동등할때 
})

반환 값에 따라 정렬을 지시한다.

 

 

2) 활용하기

<button onClick={()=>{
    let copy = [...music];
    copy = copy.sort((a,b)=>{
      if (a.title > b.title) return 1;
      if (a.title < b.title) return -1;
      return 0;
    });
    setMusic(copy);
    }}>
    <span>ABC</span>
</button>

 

music state를 깊은 복사한 뒤 sort()메서드에 함수를 전달하여 정렬하였다.

 

제목을 오름차순으로 정렬할 것이므로

a.title이 b.title 보다 큰 경우('z'가 'a'보다 유니코드 포인트가 큼) 1을 return하고

반대의 경우 -1을 return 하여 정렬한다.

 

 

 

결과화면