[함수] sort() 오름차순, 내림차순 정렬하기

리스트 형식에서 볼 수 있는 정렬을 구현하는 방법으로 sort를 사용할 수 있다.

 

1. 문자순 (오름차순/ 내림차순)

2. 숫자순 (오름차순/ 내림차순)

 

import { useState } from 'react'
import './App.css'

function App() {

let [나이, 나이변경] = useState([
  ['민수', 20],
  ['영희', 32],
  ['순신', 5],
  ['맹구', 1],
]);
  
  
return (
    <>
   	<button onClick={() => {
      let name = [...나이];
      name.sort((a, b) => a[0].localeCompare(b[0])); // 이름 기준으로 가나다순 정렬
      // name.sort((a, b) => b[0].localeCompare(a[0])); // 이름 기준으로 가나다순 내림차순 정렬
      나이변경(name);
    }}>이름 정렬</button>
    
    <button onClick={() => {
      let age = [...나이];
      age.sort((a, b) => a[1] - b[1]); // 나이 기준으로 오름차순 정렬
      // age.sort((a, b) => b[1] - a[1]); // 나이 기준으로 내림차순 정렬
      나이변경(age);
    }}>나이 정렬</button>
    
    <ul>
      <li>{나이[0][0]}: {나이[0][1]}</li>
      <li>{나이[1][0]}: {나이[1][1]}</li>
      <li>{나이[2][0]}: {나이[2][1]}</li>
      <li>{나이[3][0]}: {나이[3][1]}</li>
    </ul>
    </>
)
}

 

**localeCompare()**란?

localeCompare()는 문자열을 비교하여 두 문자열 간의 정렬 순서를 반환하는 JavaScript의 문자열 메서드

문자열을 특정 언어의 정렬 규칙에 따라 비교 가능

 

string1.localeCompare(string2, [locales], [options])

 

매개변수

1. string1: 비교하려는 첫 번째 문자열
2. string2: 비교 대상이 되는 두 번째 문자열
3. locales (선택 사항):
   • 비교에 사용할 언어 코드(예: 'en'은 영어, 'ko'는 한국어)
   • 생략 시 기본 언어 설정 사용
4. options (선택 사항):
   • 정렬 방식을 지정하는 추가 옵션.
   • 주요 옵션:
     • sensitivity: 대소문자 구분, 악센트 구분 방식 지정 ('base', 'accent', 'case', 'variant')
     • numeric: 숫자를 제대로 정렬할지 여부 (true 또는 false)

반환값

• 음수: string1이 string2보다 앞에 위치.
• 0: 두 문자열이 동일.
• 양수: string1이 string2보다 뒤에 위치.

// 기본
console.log('apple'.localeCompare('banana')); // -1 (앞에 위치)
console.log('banana'.localeCompare('apple')); // 1 (뒤에 위치)
console.log('apple'.localeCompare('apple'));  // 0 (동일)

// 한국어 정렬
console.log('가'.localeCompare('나')); // -1
console.log('다'.localeCompare('가')); // 1
console.log('가'.localeCompare('가')); // 0

// 대소문자 무시
console.log('a'.localeCompare('A', undefined, { sensitivity: 'base' })); // 0 (대소문자 무시)

// 숫자 비교(옵션 사용)
console.log('2'.localeCompare('10')); // 1 (기본 문자열 비교: '2'가 더 뒤)
console.log('2'.localeCompare('10', undefined, { numeric: true })); // -1 (숫자 비교: 2가 더 작음)

 

 

 

 

위 동작 구현하면서 한 실수

1. useState 안에 배열 요소 정렬 []를 한 번 더 감싸줘야함

2. 민수 라는 글자는 문자열로 '' 안에 넣기

 

뭐가 잘못되었는지 찾으면 아~ 하고 알겠으나 처음부터 실수하지 않도록 노력하기!
제대로 알고 넘어가기!!