[React Native] 03-5 재사용할 수 있는 컴포넌트 만들기

FlatList 코어 컴포넌트 사용하기

똑같은 컴포넌트를 여러 개 렌더링할 때는 FlatList를 사용하는 것이 속도가 빠르다.

 

import {FlatList} from 'react-native'

<FlatList data={people} />

 

 

keyExtractor 속성

item과 index 값이 매개변수인 콜백 함수를 지정해 renderItem에 설정한 콜백 함수가 반환하는 컴포넌트의 key 속성에 설정할 값을 얻음

<FlatList
	data={people}
    renderItem={({item}) => <Person person={item} />}
    keyExtractor={(item, index) => item.id} />

✅ 화살표 함수는 함수명이 없어도 됨

✅ id 같은 속성이 없다면 index.toString()을 반환해도 됨

 

 

ItemSeparatorComponent 속성

이 속성에 설정한 콜백 함수가 반환하는 컴포넌트를 아이템과 아이템 간의 구분자 역할을 하는 컴포넌트로 삽입함

ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}


const styles = StyleSheet.create({
	itemSeparator: {borderWidth: 1, borderColor: MD2Color.grey500}
})

 

 

moment 패키지 기능 사용하기

Date 클래스와 유사하지만 Date 클래스가 제공하지 않는 몇 가지 유용한 기능을 제공함

 

Date 인스턴스를 moment 인스턴스로 바꾸면 됨

moment(person.createdDate)

 

과거와 현재의 시간 차이를 알기 쉬운 형태로 알려줌

moment(person.createDate).startOf('day').fromNow()

✅ 한국어로 사용하고 싶다면 moment-with-locales-es6 패키지에서 moment 객체를 얻고 moment.locale('ko') 

 

 

 

☆ 여태껏 아바타와 이미지가 랜덤으로 나오지 않고 같은 것만 반복됐던 이유

export const unsplashUrl = (width: number, height: number): string =>
  `https://source.unsplash.com/random/${width}x${height}`
export const avatarUriByName = (name: string) =>
  `https://ui-avatars.com/api/?name=${name.split(' ').join('+')}`

위는 util.ts 의 코드 일부이다. ${}를 사용하여 링크 등에 변수 또는 표현식을 삽입하고 싶을 때는 백틱 문자 `` 로 감싸주어야 하는데 난 이걸 작은 따옴표 ''로 착각했었다.. . .. .. ^ ^ . . . 참고로 맥에서 백틱 문자는 option + ~ 라고 한다. 

 

 

const

 "상수(constant)"라고도 함

✅ 한 번 값을 할당하면 다시 변경할 수 없는 변수를 나타냄

 

 

타입스크립트 교집함 타입 구문

대수 데이터 타입 (algebraic data type, ADT) : A와 B를 타입이라고 할 때 'A 타입이거나 B타입' 혹은 'A타입이면서 B 타입' 과 같은 타입을 만들 때 사용하는 것

합집합 ➡️ A | B

교집합 ➡️ A & B

 

ComponentProps 타입

➡️ 속성(props)의 타입을 명시적으로 정의하는데 사용

React 컴포넌트: 속성(props)을 받아서 화면에 어떻게 렌더링할지를 결정하는 요소

속성(props): 컴포넌트 외부에서 전달되며, 컴포넌트 내부에서 사용

 

<사용법>

속성_타입 = ComponentProps<typeof 컴포넌트_이름>

 

잔여 연산자

➡️ 잔여 연산자를 사용하면 객체에서 일부 속성을 뺀 나머지를 쉽게 가져올 수 있음

const person = {
  name: "Alice",
  age: 30,
  country: "Wonderland"
};

const { age, ...rest } = person;

console.log(age); // 30
console.log(rest); // { name: "Alice", country: "Wonderland" }

위 예제에서 '...rest'는 'age' 속성을 제외한 모든 속성을 새로운 객체로 복사함.

 

 

StyleProp 타입

: 컴포넌트의 스타일을 설정하는 데 사용함

import { View, StyleProp, ViewStyle } from 'react-native';

type MyComponentProps = {
  containerStyle?: StyleProp<ViewStyle>;
};

function MyComponent({containerStyle}: MyComponentProps) {
  return (
    <View style={containerStyle}>
      
    </View>
  );
}

containerStyle?: StyleProp<ViewStyle>

 

'?' 기호는 이 속성이 선택적임을 나타냄 ➡️ 이 속성을 지정하지 않아도 되며 생략할 수 있음

ViewStyle : 'View' 컴포넌트에 적용할 수 있는 스타일의 타입

 

 

Text 코어 컴포넌트의 속성 탐구

 

텍스트 줄 수 제한

<Text numberOfLines={3}>text</Text>

➡️ Text가 렌더링하는 텍스트를 3줄로 제한

 

텍스트 꾸미기

email: {textDecorationLine: 'underline', textDecorationColor: 'blue'},

➡️ textDecorationLine: 텍스트에 밑줄

➡️ textDecorationColor: 밑줄 색상