React Native) FlatList 컴포넌트 활용하기

FlatList를 활용하여 목록형 데이터 관리 컴포넌트 익히기

 

 

---

 

FlatList 컴포넌트 호출

FlatList 컴포넌트 작성

<FlatList
    style={styles.list}
    data={todos}
    renderItem={({ item }) => (
        <View>
        	<Text>{item.text}</Text>
        </View>
    )}
    keyExtractor={item => item.id.toString()}
/>

- data에 목록에 활용할 데이터 배열 입력
- renderItem 함수에서 data에 입력한 데이터 배열(위에서는 todos) 안의 각 원소들 데이터를 가리키는 뷰를 보여줌
- keyExtractor는 각 항목 키값을 추출함. 보통 index사용하는데 배열 내부 변동 생기면 불필요 업데이트 하므로 따로 지정하는 것이 효율적임

---

 

renderItem Props 활용하기(개별 목록 컴포넌트 작성하기)

renderItem Props에서 활용할 별도 컴포넌트를 작성하여 개별 목록 아이템을 꾸며줌

function TodoItem({ id, text, done }) {
    return (
        <View style={styles.item}>
            <View style={styles.circle} />
            <Text style={styles.text}>{text}</Text>
        </View>
    );
}

// 이후 호출
<FlatList
    style={styles.list}
    data={todos}
    renderItem={({ item }) => (
        <TodoItem id={item.id} text={item.text} done={item.done} />
    )}
    keyExtractor={item => item.id.toString()}
/>

renderItem으로 개별 목록을 꾸민 화면

---

 

항목 사이에 구분선 보여주기

ItemSeparatorComponent Props를 추가하여 구분선 그려 주기

<FlatList
    ItemSeparatorComponent={() => <View style={styles.separator} />}
    style={styles.list}
    data={todos}
    renderItem={({ item }) => (
        <TodoItem id={item.id} text={item.text} done={item.done} onToggle={onToggle} />
    )}
    keyExtractor={item => item.id.toString()}
/>

ItemSeparatorComponent으로 구분선을 넣은 화면

---

 

onInsert, onToggle 추가하기

javascript의 map 함수를 이용하여 목록 내용 추가 및 수정함

  const onInsert = (text: any) => {
    // 새로 등록할 항목의 id를 구합니다.
    // 등록된 항목 중에서 가장 큰 id를 구하고, 그 값에 1을 더합니다.
    // 만약 리스트가 비어있다면 1을 id로 사용합니다.
    const nextId =
      todos.length > 0 ? Math.max(...todos.map(todo => todo.id)) + 1 : 1;
    const todo = {
      id: nextId,
      text,
      done: false,
    };

    setTodos(todos.concat(todo));
  };

  const onToggle = (id: any) => {
    const nextTodos = todos.map(todo =>
      todo.id === id ? {...todo, done: !todo.done} : todo,
    );
    setTodos(nextTodos);
  };