React native - FlatList

Lets_go jae·2021년 2월 17일
0

React Native

목록 보기
4/5
  • data : 리스트 뷰에 표시할 데이터의 배열

  • keyExtractor : React에서 반복적으로 동일한 컴포넌트를 표시하기 위해서는 컴포넌트에 키 값을 설정해야 합니다. React는 키 값을 보고 컴포넌트를 구별하는데, 키 값을 설정하지 않으면 어떤 컴포넌트를 업데이트 해야 할지 구별할 수 없어 예상치 못한 결과를 가져옵니다. 키 값을 설정하지 않으면 React에서는 경고를 표시합니다. keyExtractor는 FlatList에서 Item에 키 값을 설정하기 위한 Props입니다.

  • ListEmptyComponent : 주어진 배열에 데이터가 없을 경우 표시되는 컴포넌트입니다.

  • renderItem : 주어진 배열에 데이터를 사용하여 반복적으로 표시될 컴포넌트입니다.

  • contentContainerStyle={todoList.length === 0 && {flex: 1}} : 표시할 데이터가 없는 경우, ListEmptyComponent의 컴포넌트가 표시됩니다. 하지만 이 컴포넌트도 하나의 리스트 아이템으로 표시되기 때문에 전체 화면으로 표시되지 않습니다. 이 컴포넌트를 전체 화면으로 표시하기 위해 flex:1을 설정합니다.

0개의 댓글