React 목록 및 키

React에서 목록과 키는 요소 컬렉션을 효율적으로 렌더링하고 다시 렌더링할 때 ID를 유지하는 데 필수적인 개념입니다. 간략한 개요는 다음과 같습니다.

기울기

여러 항목을 렌더링해야 하는 경우 일반적으로 배열을 매핑하여 구성 요소 목록을 만듭니다. 기본적인 예는 다음과 같습니다.

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

열쇠

키는 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 도움이 됩니다. 동위 항목 간에는 고유해야 하지만 전역적으로 고유할 필요는 없습니다. 키는 안정적이어야 합니다. 즉, 렌더링 간에 변경되어서는 안 됩니다. 일반적인 관행은 ID와 같은 데이터의 고유 식별자를 사용하는 것입니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

모범 사례

• 고유 ID 사용: 데이터에 고유 식별자가 있는 경우 항상 이를 키로 사용하세요.
• 배열 인덱스 사용 방지: 인덱스를 키로 사용하면 특히 목록이 변경될 수 있는 경우 다시 렌더링하는 동안 구성요소 상태 및 성능에 문제가 발생할 수 있습니다.
• 키 일관성 유지: 목록을 재정렬하거나 필터링하는 경우 불필요한 재렌더링을 방지하기 위해 키가 동일하게 유지되는지 확인하세요.

이러한 지침을 따르면 React 애플리케이션에서 효율적이고 동적인 목록을 만들 수 있습니다!

위 내용은 React 목록 및 키의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!