React에서 정렬 가능한 테이블 만들기

표를 만드는 것은 웹 사이트에 많은 양의 정보를 표시하는 가장 좋은 방법 중 하나입니다. 최신 웹 애플리케이션은 일반적으로 화면에 표시해야 하는 많은 데이터를 저장합니다.

사용자는 원하는 것을 찾기 위해 테이블을 정렬하거나 필터링할 방법을 기대합니다. 수천 개의 행을 보도록 강요하는 것은 좋지 않은 UX 관행입니다.

가장 간단한 솔루션은 사용자가 필요한 정보를 찾을 수 있도록 열을 사전순으로 정렬할 수 있는 테이블을 만드는 것입니다.

이 기사에서는 React에서 정렬 가능한 테이블을 만드는 방법을 살펴봅니다.

React에서 정렬 가능한 테이블 만들기

먼저 웹 애플리케이션에서 테이블을 생성하는 방법에 대해 논의한 다음 테이블을 정렬 가능하게 만드는 방법을 보여줍니다.

다행스럽게도 HTML에는 매우 기본적인 테이블을 만들기 위한 기본 제공 요소가 있습니다. 이러한 요소는 <table>, <thead>, <tr>, <th>, <tbody> 등입니다. HTML로 테이블을 만드는 방법에 대한 자세한 내용은 본 가이드를 참조하세요.

이 경우에는 이미 간단한 테이블을 만들었습니다. 아래 코드를 살펴보겠습니다.

<table className="m-table">
        <thead>
          <tr>
            <th onClick={(e) => onSort(e, "firstName")}>First Name</th>
            <th onClick={(e) => onSort(e, "lastName")}>Salary</th>
          </tr>
        </thead>
        <tbody>
          {data.map(function (person, index) {
            return (
              <tr key={index} data-item={person}>
                <td data-title="firstName">{person.firstName}</td>
                <td data-title="lastName">{person.lastName}</td>
              </tr>
            );
          })}
        </tbody>
  </table>

단순화를 위해 구성 요소(및 웹 응용 프로그램)는 이 하나의 테이블이 됩니다.

보시다시피 테이블 헤더를 나타내는 두 개의 <th> 요소가 있습니다. 즉, 테이블에는 두 개의 열 레이블이 있습니다. 첫 번째는 이름이고 다른 하나는 급여입니다.

이러한 각 요소에는 onClick 핸들러가 있으며, 두 개의 인수(이벤트 개체 및 각 열의 값과 연결된 속성 이름)를 사용하여 onSort() 이벤트 핸들러를 호출합니다.

이것이 <thead> 요소의 전부입니다.

테이블 본문으로 이동하여 map() 메서드를 사용하여 data 배열의 모든 레코드를 검토하여 테이블 데이터 요소(<td>)가 있는 테이블 행 요소(<tr>)를 생성했습니다. React에서 오류를 방지하는 표준 방법인 key 속성을 index로 설정했습니다.

map() 메서드는 배열의 모든 항목을 가져오고 firstName 및 lastName 속성을 읽고 이 정보로 테이블 행을 채웁니다. 이러한 속성 이름은 헤더를 클릭할 때 onSort() 메서드에도 전달됩니다.

React에서 테이블 행 정렬

이제 테이블의 레코드를 정렬할 수 있게 해주는 구성 요소의 비즈니스 로직을 살펴보겠습니다. onSort() 함수는 테이블의 값 정렬을 처리합니다.

data 상태 변수에 저장된 함수와 샘플 데이터를 살펴보겠습니다.

  const [data, updateData] = useState([
    { firstName: "Irakli", lastName: "Tcigladze" },
    { firstName: "George", lastName: "Smith" },
    { firstName: "Mark", lastName: "Wayans" },
    { firstName: "Michael", lastName: "Simmons" },
    { firstName: "Dirk", lastName: "Johnson" },
    { firstName: "Casey", lastName: "Dawson" }
  ]);
  const onSort = (event, sortKey) => {
    const tempData = [...data];
    updateData(tempData.sort((a, b) => a[sortKey].localeCompare(b[sortKey])));
  };

사용 가능한 데이터는 비교적 표준입니다. 사람을 설명하는 객체 배열이 있습니다.

onSort() 함수는 두 개의 인수를 사용합니다. 이들은 합성 이벤트 개체와 이러한 값을 정렬하기 위한 키입니다.

즉, 특정 값이 저장되는 개체의 속성입니다. 테이블의 이름 값의 경우 키는 이름을 포함하는 개체 속성이기 때문에 firstName이고 성의 경우 lastName입니다.

React에서는 상태 데이터를 직접 변경해서는 안 되므로 data 배열의 항목을 복사하여 tempData 변수에 저장합니다.

다음으로 데이터의 값을 비교하는 방법을 설명하는 콜백 함수 인수를 허용하는 sort() 함수를 사용합니다. 이 경우 키 인수(즉, 속성 이름)를 사용하여 각 개체의 firstName 또는 lastName 값에 액세스합니다.

그런 다음 localeCompare() 메서드를 사용하여 어떤 값이 먼저 와야 하는지 결정합니다. 그런 다음 그에 따라 데이터를 정렬합니다.

CodeSandbox에서 React의 정렬 가능한 테이블을 확인할 수 있습니다. 헤더(열 레이블) 중 하나를 클릭하면 데이터가 사전순으로 정렬되는 것을 볼 수 있습니다.