import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
interface Props {
title: string;
subtitle: string;
}
const ExampleScreen: React.FC<Props> = ({ title, subtitle }) => {
return (
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
},
subtitle: {
fontSize: 16,
color: '#666',
},
});
export default ExampleScreen;이 코드는 두 개의 프로퍼티(제목과 부제목)를 받아 두 개의 텍스트 엘리먼트가 있는 뷰를 반환하는 예제 스크린이라는 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 Props 타입의 프로퍼티를 취하는 함수 컴포넌트의 유형 별칭인 React.FC 타입을 사용해 정의됩니다.
Props 인터페이스는 TypeScript를 사용하여 정의되며, 컴포넌트가 두 개의 문자열 프로퍼티(제목과 부제목)를 기대한다고 지정합니다.
스타일 객체는 컴포넌트의 스타일을 정의합니다. 이러한 스타일은 React Native에서 성능에 최적화된 스타일을 정의하는 방법인 StyleSheet.create 메서드를 사용하여 정의됩니다.
전반적으로 이 코드는 TypeScript를 사용하여 컴포넌트 프로퍼티의 인터페이스를 정의하는 방법과 StyleSheet 객체를 사용하여 React Native 스타일을 정의하는 방법을 보여줍니다.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
interface Props<T> {
data: T[];
renderItem: (item: T) => React.ReactNode;
}
function GenericList<T>({ data, renderItem }: Props<T>) {
return (
<View style={styles.container}>
{data.map((item) => (
<View key={item.id}>{renderItem(item)}</View>
))}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default GenericList;
이 예제에서는 제네릭 타입 매개변수 T를 받는 GenericList라는 제네릭 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 두 가지 프로퍼티, 즉 T 타입의 아이템 배열인 data와 T 타입의 아이템을 받아 React 노드를 반환하는 함수인 renderItem을 기대합니다.
컴포넌트 내부에서는 data.map 메서드를 사용하여 renderItem 함수를 호출하고 현재 항목을 인수로 전달하여 데이터 배열의 각 항목을 렌더링합니다.
props 인터페이스에서 일반 유형 매개변수를 사용하면 컴포넌트가 다양한 유형의 데이터와 렌더링 함수를 처리할 수 있을 만큼 유연해집니다. 예를 들어 책 객체 배열과 각 책 항목을 별도의 Book 컴포넌트로 렌더링하는 함수를 전달하여 책 목록을 렌더링하는 데 GenericList 컴포넌트를 사용할 수 있습니다.
제네릭 타입을 사용하면 코드의 재사용성과 유연성을 높일 수 있으며, React Native에서 제네릭 및 재사용 가능한 컴포넌트를 빌드하는 데 강력한 툴입니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
