[ React Native ]Tag

React Native 에서는 JSX 를 사용하지만, 그 JSX 는 HTML 이 아니라 React 컴포넌트를 나타내는 것 이라고 생각하면 된다. JSX 사용되는 태그는 React Native 에서 해당하는 네이티브 컴포넌트로 변환되어 실행된다.

JSX(JavaScript Xml)

간단한 예로,

→ <div> 대신에 React Native에서는 <View>를 사용해 레이아웃을 구성한다.

→ <span> 대신에 <Text>를 사용하여 텍스트를 표시한다.

→ <input> 대신에 <TextInput>를 사용하여 텍스트를 표시한다.

→ 이미지를 표시하려면 <Image>를 사용한다.

→ 스크롤을 구현하려면 <ScrollView>를 사용한다.

• <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 는 각 아이템의 고유한 키를 추출한다.

Uploaded by N2T