배열 정렬 반응

React에서는 항목 배열을 정렬하고 렌더링해야 할 수 있습니다. 이 게시물에서는 React에서 객체 배열을 정렬하고 렌더링하는 방법을 살펴봅니다.

배열 정렬 반응

Array.sort 함수는 원래 배열을 수정하기 때문에 sort()를 실행하기 전에 확산 구문(...)을 사용하여 얕은 복제본을 만들었습니다.

Array.map 기능을 사용하여 정렬된 배열을 그립니다.

import React from 'react';

export default function App() {
  const students = [
    {id: 9, name: 'Shiv', country: 'Nepal'},
    {id: 7, name: 'Kumar', country: 'Japan'},
    {id: 5, name: 'Yadav', country: 'USA'},
  ];

  return (
    <div>
      {[...students]
        .sort((a, b) => a.id - b.id)
        .map((student) => {
      return (
          <div key = {student.id}><h2>ID: {student.id} <
          /h2>
              <h2>Name: {student.name}</h2 >
          <h2>Country: {student.country} < /h2>

              <hr / >
          </div>
          );
        })}
    </div>);
}

이제 .sort() 함수에 대한 좀 더 자세한 정보를 얻기 위해 여기에 있는 것 같습니다. 콜백 함수는 .sort()에 대한 인수로 전송됩니다.

콜백은 비교할 두 개의 배열 항목을 나타내는 두 개의 매개변수를 허용합니다.

함수 본문 내의 return 문은 삼항식으로 구성됩니다. A와 B라는 두 배열 구성원의 첫 번째(이름) 특성을 비교합니다.

요소 A의 이름이 요소 B보다 큰 경우 1을 반환합니다(예: A는 알파벳에서 나중에 옵니다). 그렇지 않으면 -1을 반환합니다.

값 1이 반환되면 요소 A가 먼저 정렬됩니다. 값 -1이 반환되면 요소 B가 먼저 정렬됩니다.

실제로 정렬 버튼을 누르면 이름을 기준으로 A부터 Z까지 항목이 정렬됩니다.

정렬 후 map() 함수에 대한 호출을 연결했습니다. 정렬된 배열을 렌더링해야 하는 경우 중간 변수에 유지하는 것을 건너뛸 수 있습니다.