React Native의 FlatList에서 keyExtractor 소품을 사용하는 경우

React Native에서 FlatList component은 긴 데이터 목록을 렌더링하는 데 적합합니다. 한 번에 모든 데이터 항목이 아닌 스크롤 목록으로 화면에 표시되는 항목만 렌더링합니다.
FlatList 를 사용하여 스크롤 가능한 항목 목록을 렌더링하려면 필수data 소품을 구성 요소에 전달해야 합니다. data 소품은 항목 배열을 허용합니다. 배열의 각 항목은 목록의 단일 항목을 나타냅니다. 또 다른 필수 소품은 renderItem 로, data 에서 항목을 가져와 목록에 렌더링합니다. 이 소품은 렌더링할 JSX를 반환하는 함수를 허용합니다.

스크롤 가능한 목록에 항목을 표시하려면 FlatList 구성 요소에 각 항목에 id 와 같은 고유 키가 있어야 합니다. 이 키는 FlatList 구성 요소(후드 아래에서 VirtualizedList를 사용하기 때문에)가 목록의 항목 순서를 추적할 수 있도록 합니다. 데이터 배열의 키는 keyExtractor 구성 요소의 FlatList 소품을 사용하여 추출됩니다.

이 게시물에서는 사용해야 할 수 있는 위치keyExtractor와 필요하지 않은 시나리오에 대해 이야기해 보겠습니다.

FlatList를 사용하여 항목 목록 표시

다음 데이터 구조를 고려하십시오. 배열에는 10개의 항목이 있고 각 항목에는 id 및 title 의 두 가지 속성이 있습니다. id는 각 항목의 고유 키입니다.

const DATA_WITH_ID = [
  {
    id: 1,
    title: 'quidem molestiae enim'
  },
  {
    id: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    id: 3,
    title: 'omnis laborum odio'
  },
  {
    id: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    id: 5,
    title: 'eaque aut omnis a'
  },
  {
    id: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    id: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    id: 8,
    title: 'qui fuga est a eum'
  },
  {
    id: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    id: 10,
    title: 'distinctio laborum qui'
  }
];

FlatList 구성 요소를 사용하여 아래와 같이 각 항목의 title를 렌더링하려고 합니다.

export default function App() {
  const renderList = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemText}>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList data={DATA_WITH_ID} renderItem={renderList} />
    </View>
  );
}

위 구성 요소의 결과는 오류나 경고 없이 항목 목록을 표시합니다. 또한 FlatList 구성 요소는 원래 데이터 구조에 이미 id 라는 키가 포함되어 있으므로 각 항목을 식별하기 위해 고유한 키가 필요하지 않습니다.

다음은 위 스니펫의 기기 화면 출력입니다.

keyExtractor 소품 사용

기본적으로 keyExtractor 소품은 key 및 id와 같은 속성을 순서대로 확인합니다. 둘 중 하나가 원래 데이터 구조에 있으면 FlatList 구성 요소에서 고유 키로 간주합니다. 이 경우(이전 예제에서와 같이) keyExtractor 소품을 명시적으로 사용할 필요가 없습니다.

제공되지 않은 경우 FlatList 구성 요소는 "VirtualizedList: missing keys for items ..."라는 경고를 표시합니다.



이제 데이터 배열에 각 목록 항목의 고유 키가 포함되어 있지만 고유 키의 이름이 key도 아니고 id도 아닌 시나리오를 고려해 보겠습니다. 여기에는 이름이 userId 인 고유 키 속성이 포함되어 있습니다.

const DATA_WITH_USER_ID = [
  {
    userId: 1,
    title: 'quidem molestiae enim'
  },
  {
    userId: 2,
    title: 'sunt qui excepturi placeat culpa'
  },
  {
    userId: 3,
    title: 'omnis laborum odio'
  },
  {
    userId: 4,
    title: 'non esse culpa molestiae omnis sed optio'
  },
  {
    userId: 5,
    title: 'eaque aut omnis a'
  },
  {
    userId: 6,
    title: 'natus impedit quibusdam illo est'
  },
  {
    userId: 7,
    title: 'quibusdam autem aliquid et et quia'
  },
  {
    userId: 8,
    title: 'qui fuga est a eum'
  },
  {
    userId: 9,
    title: 'saepe unde necessitatibus rem'
  },
  {
    userId: 10,
    title: 'distinctio laborum qui'
  }
];

목록을 렌더링할 때 FlatList 구성 요소가 원래 데이터 구조에서 userId 또는 key 이름으로 id를 인식하지 못하기 때문에 이 경우 경고가 표시됩니다.

위의 예에서 userId와 같은 사용자 정의 키 이름의 경우 keyExtractor 소품이 사용됩니다. 고유한 키 이름과 해당 값을 추출하고 해당 값을 기반으로 항목을 추적하도록 FlatList 구성 요소에 지시합니다.

위 데이터 배열의 경우 FlatList 구성 요소를 수정하고 keyExtractor 소품을 사용하여 키를 추출합니다.

<FlatList
  data={DATA_WITH_ID}
  renderItem={renderList}
  keyExtractor={item => item.userId}
/>

이 단계가 끝나면 경고도 사라집니다.

결론

FlatList 구성 요소를 사용할 때 데이터 배열에 고유한 id 또는 key 속성이 있으면 keyExtractor 소품을 명시적으로 사용할 필요가 없습니다. 그러나 사용자 정의 ID 이름의 경우 keyExtractor 소품을 사용하여 추출할 고유 키를 구성 요소에 명시적으로 알려줍니다.

React Native에 대해 자세히 알아보려면 내 블로그의 React Native category 및 Expo category 페이지를 확인하세요. 내newsletter를 구독하거나 내가 새 기사나 자습서를 게시할 때마다 업데이트를 받을 수 있습니다.