들어가며
관리자 페이지나 목록 UI를 만들다 보면 이름을 가나다순으로 정렬해야 할 때가 있습니다.
JavaScript에서는 배열의 sort() 메서드로 문자열을 정렬할 수 있습니다.
하지만 한글 정렬에서는 단순 sort()보다 localeCompare()를 함께 사용하는 편이 더 명확합니다.
기본 sort 사용하기
1
2
3
4
5
6
const names = ["박상준", "김서윤", "나하늘", "강민지", "오유진"];
const sortedNames = [...names].sort();
console.log(sortedNames);
// ["강민지", "김서윤", "나하늘", "박상준", "오유진"]
한글도 유니코드 순서에 따라 정렬되기 때문에 기본적인 가나다순 정렬은 가능합니다.
다만 원본 배열을 직접 바꾸지 않기 위해 [...]로 복사한 뒤 정렬했습니다.
sort()는 원본 배열을 변경하는 메서드이기 때문입니다.
localeCompare 사용하기
문자열 정렬 의도를 더 명확히 표현하고 싶다면 localeCompare()를 사용할 수 있습니다.
1
2
3
4
5
6
const names = ["박상준", "김서윤", "나하늘", "강민지", "오유진"];
const sortedNames = [...names].sort((a, b) => a.localeCompare(b, "ko"));
console.log(sortedNames);
// ["강민지", "김서윤", "나하늘", "박상준", "오유진"]
"ko"를 전달하면 한국어 기준 정렬이라는 의도가 더 잘 드러납니다.
내림차순 정렬하기
가나다 역순으로 정렬하고 싶다면 비교 순서를 바꾸면 됩니다.
1
2
3
4
5
6
const names = ["박상준", "김서윤", "나하늘", "강민지", "오유진"];
const sortedNames = [...names].sort((a, b) => b.localeCompare(a, "ko"));
console.log(sortedNames);
// ["오유진", "박상준", "나하늘", "김서윤", "강민지"]
또는 오름차순 정렬 후 reverse()를 사용할 수도 있습니다.
1
const sortedNames = [...names].sort((a, b) => a.localeCompare(b, "ko")).reverse();
객체 배열 정렬하기
실제 프로젝트에서는 문자열 배열보다 객체 배열을 정렬하는 경우가 많습니다.
1
2
3
4
5
6
7
8
9
10
11
const users = [
{ id: 1, name: "박상준" },
{ id: 2, name: "김서윤" },
{ id: 3, name: "나하늘" },
];
const sortedUsers = [...users].sort((a, b) =>
a.name.localeCompare(b.name, "ko"),
);
console.log(sortedUsers);
객체 안의 name 값을 기준으로 비교하면 됩니다.
마무리
한글 문자열을 가나다순으로 정렬할 때는 sort()를 사용할 수 있습니다.
정렬 기준을 더 명확히 하고 싶다면 localeCompare("ko")를 함께 사용하는 것이 좋습니다.
그리고 sort()는 원본 배열을 변경하므로, React 상태나 원본 데이터를 보존해야 하는 상황에서는 배열을 복사한 뒤 정렬하는 습관을 들이면 안전합니다.