💻[React Native] Expo로 TodoList 만들기2

📌 Expo checkbox

React의 switch와 유사

📌 Row Component

style을 미리 component 자체로 빼서 적용
이때, 원하는 원래의 style+자체로 따로 입력받고 싶은 style로 나누어서 적용

🔗 Row.js

function Row({ children, style }) {
  return <View style={[ styles.row, style ]}> //style 따로 입력 받기
    {children}
    </View>;
}
const styles = StyleSheet.create({ //default style
  row: {
    flexDirection: "row",
  }
});
export default Row;

🔗 TodoItem.js

export default function TodoItem() {
  return (
    <Row style={{ alignItems: "center" }}>
      <Checkbox />
      <Text>할 일 목록</Text>
    </Row>
  );
}

📌 checkbox

falsy한 부분으로, 클릭을 한다고 해서 바로 UI가 바뀌지 않음
value값 자체가 true로 바뀌어야만 UI 변경이 일어남
따라서 useState를 사용하여, Event를 통해서 값이 변경이 되고, 변경된 값이 state에 반영을 하고 state값이 다시 checkbox에 반영하여 UI 변화가 나타남

🔗 TodoItem.js

export default function TodoItem() {
  const [isDone, setDone] = useState(false);
  return (
    <Row style={{ alignItems: "center", marginBottom: 12 }}>
      <Checkbox
        value={isDone}
        onValueChange={(value) => setDone(value)}
        valuestyle={{ marginRight: 8 }}
      />
      <Text>할 일 목록</Text>
    </Row>
  );
}

📌 글자 입력받기 - {label}

🔗 TodoItem.js

export default function TodoItem({ label }) {
  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>
    </Row>
  );
}

📌 map() -> 리스트형 데이터 처리

🔗 App.js

const [list, setList] = useState(["할일 1", "할일 2"]);
return (
  <SafeAreaView style={styles.container}>
    <Padding padding={12}>
      {list.map((item) => (
        <TodoItem key={item} label={item} />
      ))}

• key: 각 요소를 구별할 수 있도록 하는 것, 정확하게 똑같은 component나열일 때 중간에 어떤 것이 빠져도 바로 구분할 수 있음, 구분을 할 수 있어서 화면을 그리는 성능을 높여줌

  명확하게 특정할 수 있는 KEY를 부여하는 것이 더 현명한 방법
  INDEX는 요소 하나가 제거가 되면, 다시 부여되기 때문에 헷갈릴 수 있음