React-Native ( style 속성과 StyleSheet API 이해하기) - part4

컴포넌트 배치 관련 스타일 속성 탐구하기

(코드는 맨 아래에)

• flex: 1과 height: '100%'의 차이
  • height: '100%'스타일은 높이와 무관하게 부모 컴포넌트의 높이를 모두 가져오므로 ( Dimensions.get('window').height )값을 설정한 것과 같은 효과가 나타난다
  • 하지만 flex: Integer 는 자식 요소 끼리 부모 컨테이너의 공간을 나눠 가지는 역할을 수행할 때 사용됩니다.
• flexDirection 스타일 속성
  • React-Native는 flexDirection의 기본값이 'height'이기 때문에 위의 그림에서 TopBar의 컨테이너를 'row'로 나누고 flex의 비율을 1씩 할당한 것입니다.
  • 또한 Content 부분은 비율을 각각 1 2 3 으로 차등 분배 한 예시 입니다.
• alignItems 스타일 속성
  • left, center, right, stretch속성을 지정할 수 있습니다.
  • flexDirection 속성은 flexDirection 속성값에 따라 동작 방향이 달라 집니다
    • flexDirection 속성값이 'row'라면 alignItems는 자식 컴포넌트의 수직 방향 배치에 영향을 줍니다.
    • 이와는 달리 flexDirection값이 'column'이라면 alignItems는 수평 방향으로 작용합니다.
• justifyContent 스타일 설정
  • flex-start, center, flex-end, space-arount, space-between, space-evenly속성을 지정할 수 있습니다.
  • 아래 사진에서 justifyContent 스타일 속성을 'space-evenly'로 설정한 예시를 보여줍니다.
  
• flexWrap 스타일 속성
  • 화면에 20개의 아바타 이미지를 화면에 렌더링 했는데 이걸 화면이 다 담지 못하는 상황이 생깁니다.
  • 그런데 flexWrap속성을 지정하면 아래로 내려가면서 어떠한게 감싸주는 형태가 됩니다
  • nowrap, wrap, wrap-reverse 스타일 속성을 지정해 줄 수 있습니다.
• overflow 스타일 속성
  • visible, hidden, scroll 스타일 속성을 지정할 수 있다
  • overflow 스타일이 visible이면 콘텐츠는 컴포넌트의 크기와 부관하게 렌더링되지 않습니다.
  • 근데 web과는 달리 overflow에 scroll을 설정해도 스크롤이 되지 않는데 그 이유는 React-Native에서는 ScrollView나 FlatList코어 컴포넌트에서만 가능하기 때문입니다.
  • ScrollView의 contentContainerStyle 속성
    • ScrollView는 다른 코어 컴포넌트와는 달리 contentContainerStyle속성을 별도로 제공
    • 이는 스크롤 대상 콘텐츠 컴포넌트에 적용되는 속성입니다 -> 스타일 객체 설정
    • 또한 flex를 1로 설정하면 정상적으로 동작하지 않습니다.
  • 화면에 뜬 효과 주기
    • 이를 플로팅 액션 버튼(floating action button, FAB)라고 한다
    • 이를 주려면 position, left, right, top, bottom과 같은 스타일 속성과 리액트가 제공하는 Fragment컴포넌트를 반드시 이해해야 합니다.
    • left, right, top, bottom과 position 스타일 속성
      • position 스타일 속성값을 'absolute'로 지정해야 비로소 설정값이 컴포넌트에 반영됩니다
      • left 10-> 왼쪽을 기준으로 오른쪽으로 10픽셀 이동 right, top, bottom 동일
      • 이와 같이 FAB효과를 줍니다.
• ScrollView 대신 FlatList코어 컴포넌트 사용하기
  • 리액트 네이티브는 렌더링에 최적화된 FlatList 코어 컴포넌트를 제공합니다.
  • FlatList는 ScrollView와는 다르게 화면에 보여지는 부분만 렌더링 하는 성격이 있다.
  • 똑같은 컴포넌트를 여러 개 렌더링할 때는 FlatList를 사용하는 것이 좀 더 속도가 빠릅니다.
  • renderItem속성에는 ({item}: {item: T}) => { }, 즉 T타입 데이터이며 item이란 이름의 속성이 있는 객체를 매개변수로 하는 콜백함수를 설정합니다 -> 이걸로 children을 만드는 로직을 구현할 수 있습니다.
  • keyExtractor속성에 item과 index값이 매개변수인 콜백 함수를 지정해 renderItem에 설정한 콜백 함수가 반환하는 컴포넌트의 key속성에 설정할 값을 얻습니다.
  • data는 만들고자 하는 리스트의 source를 담는 prop이다.
  • renderItem은 data로 받는 소스들 그 각각의 item들을 render시켜주는 콜백함수이다.
  • keyExtractor는 ReactJS map함수에서 key={idex}와 해줬듯이 각각의 item에 고유의 키를 주는 것이라 생각하면 된다
  • ItemSeperatorComponent라는 속성은 콜백 함수가 반환하는 컴포넌트를 아이템과 아이템 간의 구분자 역할을 하는 컴포넌트로 삽입합니다.

import React from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Alert,
  Platform,
  FlatList,
  Text,
} from 'react-native';
import color from 'color';
import {Colors} from 'react-native-paper';
import TopBar from './src/screens/TopBar';
import Content from './src/screens/Content';
import BottomBar from './src/screens/BottomBar';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const iconPressed = () => Alert.alert('Icon pressed');

// 2명의 데이타
// 배열인데 그 안에 객체가 있어야 한다.
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

// @ts-ignore
const Item = ({title}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const SeperatorItem = () => <View style={styles.itemSeperator}></View>;

const App = () => {
  // @ts-ignore
  const renderItem = ({item}) => <Item title={item.title} />;
  return (
    <SafeAreaView style={styles.flex}>
      <TopBar />
      <Content />
      <BottomBar />
      <View style={[styles.absoluteView]}>
        <Icon
          name="feather"
          size={50}
          color="white"
          onPress={() => iconPressed()}
        />
      </View>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ItemSeparatorComponent={() => <SeperatorItem />}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  flex: {
    flex: 1,
    backgroundColor: Colors.lightBlue100,
  },
  absoluteView: {
    backgroundColor: Colors.purple900,
    position: 'absolute',
    right: 30,
    bottom: Platform.select({ios: 100, android: 80}),
    padding: 10,
    borderRadius: 35,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  itemSeperator: {
    borderWidth: 1,
    borderColor: color(Colors.grey500).lighten(0.3).string(),
  },
});

export default App;

코드 결과