💻[React Native] Expo로 TodoList 만들기4-Flatlist, key, 삭제

📌 FlatList

스크롤이 필요해 양이 많은 아이템들을 보여줄 때 사용하는 컴포넌트
스크롤을 하면 움직이는 모션이 나타나는 것이 특징, 리스트 안에서 스크롤 처리 가능
🔗App.js

<FlatList
          data={list}
          renderItem={(item) => <TodoItem label={item.item} />}
          //어떤 식으로 나타낼 지(map 함수의 형식과 동일)
          keyExtractor={(item) => item} //key값 설정
          style={{ flex: 1 }}
          //자신이 쓸 수 있는 최대 크기 사용
        />

📌 key

key를 생성했을 경우는 keyExtractor 불필요
만약, key를 각 list의 순서로 하게 된다면, key:list.length+1+'' (string으로 변환) 이지만 이때 삭제의 경우는 문제가 생길 수 있음

uuid: 완벽하게 겹치지 않는 hash-id 제공

화면에 표시되기엔 너무 긴 것이 단점
react component와 아무 상관이 없는 순수 Node package 따라서 expo와 상관없이 사용해야 하므로 설치가 필요
동일하게 들어가도 랜덤으로 배정되기 때문에 겹칠 일이 거의 없음
🔗App.js

const addItem = useCallback(() => {
    setList([...list, { key: uuid().toString(), content: inputText }]);
  }, [list, inputText]);

tinyuid: string이 조금 짧게 생성됨

현재 Date 클릭하는 시점을 이용해서 key를 만들어도 상관 없음(그러나 여러 사람들이 동시에 사용할 경우 문제가 발생)

new Date().toString()

📌 삭제

삭제와 관련된 함수를 만들고 그 함수를 삭제 버튼에서 호출
🔗 App.js

 const removeItem = useCallback(
    (key) => {
      setList(list.filter((item) => item.key !== key));
    },
    [list]
  ); //삭제 함수

<FlatList
          data={list}
          renderItem={(item) => (
            <TodoItem
              id={item.item.key}
          //key를 전달해야 함 그러나 key는 미리 지정된 props 
          //따라서 Flatlist 등에 쓰이는  key와 겹치게 되므로, id로 명명
              label={item.item.content}
              onDelete={removeItem} 
			//Flatlist에서 onDelete로 삭제 함수를 받음
            />
          )}
          style={{ flex: 1 }}
        />
			//id와 onDelete를 넘겨주게 됨 

🔗 TodoItem.js

export default function TodoItem({ label, id, onDelete }) {
  const [isDone, setDone] = useState(false);
  return (
    <Row style={{ alignItems: "center", marginBottom: 12 }}>
      <Checkbox
        value={isDone}
        onValueChange={(value) => setDone(value)}
        valuestyle={{ marginRight: 8 }}
      />
      <Text style={{ color: isDone ? "#eee" : "#000" }}>
        {label ?? "내용 없음"}
      </Text>
      <Button title="삭제" onPress={() => onDelete(id)} />
    </Row>
  );
}

id 즉, key를 이용해서 삭제를 하므로 중간의 것들도 삭제 가능

만약, removeItem의 component를 해당 component안에서 실행시킬 경우
id를 넘겨주지 않아도 되므로 넘겨주는 props가 적어짐

🔗 //App.js
<FlatList
          data={list}
          renderItem={(item) => (
            <TodoItem
              id={item.item.key}
              label={item.item.content}
              onDelete={()=>removeItem(item.item.key)}
            />
          )}
          style={{ flex: 1 }}
        />
//TodoItem.js
<Button title="삭제" onPress={onDelete} />