[기업협업 2022/01/26]flatList란?

Differences between REACT-NATIVE and REACT

react native가 암만 react 기반이래도 react와 동일하지는 않습니다. RN과 react간 가장 큰 차이점은 HTML 태그과 CSS를 활용할 수 없다는 점인데요. 체감상 <div> 없이 코드를 작성한다는 점이 정말 낯설었습니다.

Ract Native Core Components

대신 RN에서는 react components들이 존재합니다. 안드로이드 플랫폼과 ios플랫폼 모두에서 활용 가능한 core components와, 각각의 플랫폼에서만 활용할 수 있는 android components, 그리고 ios components가 있습니다.

👀 참고 페이지
https://reactnative.dev/docs/intro-react-native-components
https://reactnative.dev/docs/components-and-apis

1. Basic components

core component에서도 가장 기본적인 컴포넌츠입니다. 베이직 컴포넌트만으로 기본적인 어플리케이션 UI는 얼마든지 구현 가능합니다.

1. <View> : div의 훌륭한 대리인이 아닐까요? UI를 그리기 위한 가장 근본적인 컴포넌트입니다. 섹션을 나눠주는 역할을 합니다.
2. <Text> : View 컴포넌트는 div 나 span과는 달리 내부에 직접적인 텍스트를 입력할 수 없습니다. 따라서 텍스트를 화면 상에 그리기 위해서는 텍스트 컴포넌트로 감싸주어야 합니다.
3. <Image>: <img>처럼 화면에 이미지를 보여주기 위한 컴포넌트입니다.
4. <TextInput> : <input>태그처럼 키보드로 입력된 텍스트 인풋을 받을 수 있는 컴포넌트입니다.
5. <ScrollView> : 조금 생소한 개념이었는데요, 스크롤이 가능한 컨테이너를 제공하는 역할을 합니다. 일반적인 앱에서 대부분의 페이지가 스크롤 가능하다는 점을 생각해보면, 화면의 최외곽은 주로 스크롤뷰 컴포넌트로 감싸져 있는 구조를 가지고 있을겁니다.
6. <StyleSheet> : CSS와 유사한 스타일 시트를 제공하는 컴포넌트입니다.

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

const DisplayAnImage = () => {
  return (
  <View style={styles.container}>
    <View style={styles.imgContainer}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
    </View>
    <View>
      <Text styles={styles.text}>
        Hello
      </Text>
    </View>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: "center",
  },
  imgContainer: {
    backgroundColor: "aqua",
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
  text: {
    backgroundColor: "gray",
  },
});

export default DisplayAnImage;

2. List View - FlatList

만약 아주 긴 페이지를 로딩해야 한다면, <scrollView>를 사용하는 것은 별로 효율적이지 못한 방법이라고 합니다.(출처: 여기) 스크롤뷰는 화면이 로딩되는 즉시 모든 element들을 랜딩하기 때문입니다. 반면에 ListView는 현재 화면에 띄워지는 요소들만 랜딩하기 때문에, 긴 데이터를 담아낼 때에는 리스트 뷰를 활용하는 것이 좋습니다.

그중에서 제가 오늘 배운 컴포넌트는 <FlatList>라는 컴포넌트입니다.
Javascript의 array method 중 map에 UI기능을 추가한 느낌이었습니다.
단순한 용례는 다음과 같습니다.

      <FlatList
        data={DATA}
        renderItem={renderItem}
      />

DATA : 요소를 반복시킬 배열이 들어갑니다. 말하자면 빵반죽
renderItem : 요소를 반복시킬 형태가 들어갑니다. 말하자면 빵틀

맵의 심플한 예제와 비교해보면

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);

DATA는 array1 에 해당하며,
renderItem은x=>x*2의 해당하는 부분입니다.

그밖에도 다양한 props를 제공하는데요. 자세한 사항은 이 페이지에서 확인하실 수 있습니다.