[클라우딩 어플리케이션 엔지니어링 TIL] 240318, 240319 - React Native 심화 컴포넌트

Intro

---

오늘은 어제에 이어 리액트 네이티브의 더 다양한 컴포넌트들을 알아보고 실습해 보았다.

 

 

 

오늘 학습한 내용

---

FlatList

: 대용량 데이터를 한 번에 처리할 수 있는 컴포넌트

단점으로는 동적 데이터 처리에 렌더링이 많이 필요하고 부모 컴포넌트가 렌더링 될 때 FlatList도 리렌더링 된다는 점이 있다.

그래서 보통 useCallback으로 처리한다.

<FlatList
  data={dummy_data}
  renderItem={({item, index}) =>
    <TestTemplate data={item} />
  }
  keyExtractor={item => item.id}
  ListHeaderComponent={() => (
    <View style={styles.chatDayWrapper}>
       <Text style={styles.chatDay}>2022년 2월 7일</Text>
   </View>
  )}
  showsVerticalScrollIndicator={false}
/>

 

 

 

---

✅ iOS 시뮬레이터에서 리액트 네이티브 디버깅 여는 법
▫️ Flipper 설치 (
▫️ 시뮬레이터에서 Cmd ⌘+ D→ open debugger

 

 

 

인터렉션을 위한 Animated

: 에니메이션 API

 

Props

• useNativeDriver: 사용 시 성능이 올라감
• toValue
• duration: 숫자(ms) 동안 변함

Func

• timing
• spring
• ...

 

---

React Navigation

Getting started | React Navigation

 

• 설치하기

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

 

• 필요한 Navigators 설치

npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs

...

 

• pod install

cd ios
npx pod-install

 

• 사용하기

: 페이지의 props로 navigation 가져오거나 useNavigation 사용

import React from 'react';
import { View } from 'react-native';

const Test = ({ navigation }) => {
  return <View></View>
}

export default Test

import {useNavigation} from '@react-navigation/native';

const Test = () => {
  const navigation = useNavigation();
  ...
}

 

 

 

 

---

Modal

: react naitve에 modal 기본 컴포넌트가 있으나 커스텀이 번거로워 잘 사용하지 않음

주로 아래의 react-native-modal을 사용

GitHub - react-native-modal/react-native-modal: An enhanced, animated, customizable Modal for React Native.

import React from 'react';
import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
import Modal from 'react-native-modal';

const AlertModal = ({
  isVisible,
  okText,
  noText,
  headerTitle,
  onPressOk,
  onPressNo,
}) => {
  return (
    <Modal
      useNativeDriver
      animationOut="zoomIn"
      animationOut="fadeOut"
      animationInTiming={200}
      animationOutTiming={200}
      isVisible={isVisible}
      backdropOpacity={0.6}
      style={styles.modalContainer}>
      <View style={styles.modalBox}>
        <View style={styles.modalHeader}>
          <Text>{headerTitle}</Text>
        </View>
        <View style={styles.modalButtonContainer}>
          <TouchableOpacity onPress={onPressNo} style={styles.modalButton}>
            <Text>{noText}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={onPressOk} style={styles.modalButton}>
            <Text>{okText}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    margin: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
    width: 320,
    borderRadius: 8,
    backgroundColor: '#fff',
    paddingTop: 10,
  },
  modalHeader: {
    minHeight: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalButtonContainer: {
    flexDirection: 'row',
    borderStyle: 'solid',
    borderColor: '#c3c3c3',
    borderTopWidth: 0.5,
  },
  modalButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
  },
});

export default AlertModal;

 

 

 

 

---

그 외 라이브러리

Calendar

https://github.com/wix/react-native-calendars

GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆

 

Slider

https://github.com/meliorence/react-native-snap-carousel

GitHub - meliorence/react-native-snap-carousel: Swiper/carousel component for React Native featuring previews, multiple layouts,

 

 

 

 

마무리

---

기본 컴포넌트보다 약간 어려워져서 계속 만들어보고 익숙해져야겠다.