U

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