[React] useState, 배열 한글, 영문, 영문 대소문자, 숫자 정렬하기 ( sort )

React 배열을 정리해보자

예시에는 useState를 사용하였지만 배열도 동일하다

예시 결과를 먼저 보자

 

전체 코드도 먼저 보도록 하자

import React, { useState } from "react";

export default function Sort() {
  const [sortData1, setSortData1] = useState(["라", "나", "다", "가"].sort());
  const [sortData2, setSortData2] = useState(["D", "A", "b", "G"].sort());
  const [sortData3, setSortData3] = useState(
    ["D", "A", "b", "G"].sort((a, b) => {
      if (a.toUpperCase() > b.toUpperCase()) {
        return 1;
      } else {
        return -1;
      }
    })
  );
  const [sortData4, setSortData4] = useState(["1", "10", "25", "7"].sort());
  const [sortData5, setSortData5] = useState(
    ["1", "10", "25", "7"].sort((a, b) => a - b)
  );

  return (
    <div>
      <h1>["라", "나", "다", "가"].sort()</h1>
      <h2>
        {sortData1[0]},{sortData1[1]},{sortData1[2]},{sortData1[3]}
      </h2>
      <h1>["D", "A", "b", "G"].sort()</h1>
      <h2>
        {sortData2[0]},{sortData2[1]},{sortData2[2]},{sortData2[3]}
      </h2>
      <h1>["D", "A", "b", "G"].sort(대소문자)</h1>
      <h2>
        {sortData3[0]},{sortData3[1]},{sortData3[2]},{sortData3[3]}
      </h2>
      <h1>["1", "10", "25", "7"].sort()</h1>
      <h2>
        {sortData4[0]},{sortData4[1]},{sortData4[2]},{sortData4[3]}
      </h2>
      <h1>["1", "10", "25", "7"].sort((a, b) => a - b)</h1>
      <h2>
        {sortData5[0]},{sortData5[1]},{sortData5[2]},{sortData5[3]}
      </h2>
    </div>
  );
}

 

1. 한글 정렬

아래와 같이 입력하면 가, 나, 다, 라로 출력이 되며

역순으로 정렬 방법은 sort() 함수 안에 (a,b) => a-b 를 입력해주면 역순으로 정렬이 된다

const [sortData1, setSortData1] = useState(["라", "나", "다", "가"].sort());
const [sortData1, setSortData1] = useState(["라", "나", "다", "가"].sort((a,b) => a-b)); //역순
	<h1>["라", "나", "다", "가"].sort()</h1>
	<h2>
		{sortData1[0]},{sortData1[1]},{sortData1[2]},{sortData1[3]}
	</h2>

 

 2. 영문 정렬

아래와 같이 입력하면 영문이 A, D, G, b 순으로 정렬이 된다

하지만 b가 맨 뒤에있다 

아마 아스키 코드상 소문자가 대문자보다 숫자가 크기때문으로 추측해본다(아니라면 죄송ㅠㅠ) 

그럼 어떻게 해결해야할까?

const [sortData2, setSortData2] = useState(["D", "A", "b", "G"].sort())

	<h1>["D", "A", "b", "G"].sort()</h1>
	<h2>
		{sortData2[0]},{sortData2[1]},{sortData2[2]},{sortData2[3]}
	</h2>

 

열심히 찾은 결과 대문자로 변환(toUpperCase)한 뒤 비교하면 된다는결론이다

아래와 같이 코드를 작성하니 결과가 A, b, D, G로 출력이 된다

혼자 작성한거라 이게 맞는건지 모르겠지만 작동이되니 봐주도록 하자

const [sortData3, setSortData3] = useState(
    ["D", "A", "b", "G"].sort((a, b) => {
      if (a.toUpperCase() > b.toUpperCase()) {
        return 1;
      } else {
        return -1;
      }
    })
  );
	<h1>["D", "A", "b", "G"].sort(대소문자)</h1>
	<h2>
	{sortData3[0]},{sortData3[1]},{sortData3[2]},{sortData3[3]}
	</h2>

 

3. 숫자 정렬

첫번째 줄의 sortData4 의 출력결과는 위의 예시결과에서 볼수있듯 1, 10, 25, 7이다

변하지 않았다 9, 15, 8, 21을 할경우 아마 정렬 결과는 15, 21, 8, 9순일것이다

아마 맨 앞의 숫자순으로 정렬이 되는 듯 하다

그렇기때문에 숫자를 정렬 할 경우에는 sort 함수 안에 (a, b) => a-b 를 입력하면 해결이 된다

const [sortData4, setSortData4] = useState(["1", "10", "25", "7"].sort());
const [sortData5, setSortData5] = useState(["1", "10", "25", "7"].sort((a, b) => a - b));

	<h1>["1", "10", "25", "7"].sort()</h1>
	<h2>
		{sortData4[0]},{sortData4[1]},{sortData4[2]},{sortData4[3]}
	</h2>
	<h1>["1", "10", "25", "7"].sort((a, b) => a - b)</h1>
	<h2>
		{sortData5[0]},{sortData5[1]},{sortData5[2]},{sortData5[3]}
	</h2>

 

참쉽죠?