[ReactNative] ReactNative 에서 사용하는 Tag, Optional 정리

1. <View> : 레이아웃을 구성한다.

 

2. <Text> : 텍스트를 표시한다.

---

• numberOfLines={1} 및 ellipsizeMode="tail"는 텍스트가 한 줄을 넘어가면 자르고 "..." 을 표시하도록 설정해준다

3. <Image> : 이미지 표시

4. <ScrollView> : 스크롤 구현를 사용한다.

5. **<FlatList> : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다**

---

유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다.

1. 효율적인 렌더링 : 화면에 보이는 아이템만 렌터링 하므로 성능이 향상된다. 리스트가 매우 긴 경우에도 효율적으로 처리가 가능
2. 스크롤 지원 : 스크롤 동작이 자연스럽게 지원되며, 스크롤 위치에 따라 적절한 아이템만 렌더링 한다.

code 예제

---

import React from 'react';
import { FlatList, View, Text } from 'react-native';

const MyFlatList = () => {
  const data = [
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    // ... 더 많은 아이템
  ];

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.text}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

export default MyFlatList;

→  <FlatList> 는 data 배열을 기반으로 각 아이템을 렌더링 한다

→  randerItem 함수는 각 아이템의 렌더링을 담당하고,

→  keyExtractor 는 각 아이템의 고유한 키를 추출한다.

6. **<Button>** 태그는 Style 을 지원하지 않는다.

---

• Button 컴포넌트에 스타일을 적용하려면 TouchableOpacity나 TouchableHighlight 등과 같은 터치 가능한 컴포넌트를 사용하여 버튼을 직접 만들어야 합니다.

<TouchableOpacity
    style={styles.button}
    onPress={addTodo}
  >
    <Text style={styles.buttonText}>Add</Text>
  </TouchableOpacity>
</View>