React Native의 props란 무엇인가요?-JS 튜토리얼-php.cn

React Native의 props란 무엇인가요?

WBOY

풀어 주다： 2023-08-29 18:13:10

앞으로

1079명이 탐색했습니다.

Props는 React 구성 요소를 수정하는 데 도움이 되는 속성입니다. 생성된 컴포넌트는 props 개념을 사용하여 다양한 매개변수와 함께 사용할 수 있습니다. props를 사용하면 요구 사항에 따라 구성 요소를 재사용하면서 한 구성 요소에서 다른 구성 요소로 정보를 전달할 수 있습니다.

ReactJS에 능숙하다면 React Native에서도 같은 개념을 따르는 props에 익숙할 것입니다.

소품이 무엇인지 설명하기 위해 예를 살펴보겠습니다.

예제 1: React Native 내장 구성 요소의 Prop

이미지 구성 요소 고려 -

<Image
   style={styles.stretch} source={{uri: &#39;https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png&#39;}}
/>

로그인 후 복사

Style 및 Source은 속성, 즉 이미지 구성 요소의 소품입니다. 스타일 소품은 너비, 높이 등 스타일을 추가하는 데 사용되는 반면, 소스 소품은 사용자에게 표시할 이미지에 URL을 할당하는 데 사용됩니다. 이미지 구성 요소의 소스, 스타일 및 기본 제공 속성입니다.

아래와 같이 URL을 저장하는 변수를 사용하여 소스 속성으로 사용할 수도 있습니다. -

let imgURI = {
   uri:
&#39;https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png&#39;
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

로그인 후 복사

아래 예는 내장된 props를 사용하여 간단한 이미지를 표시하는 방법을 보여줍니다. -

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";

const MyImage = () => {
   let imgURI = {
      uri: &#39;https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png&#39;
   };
   return (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: &#39;stretch&#39;,
   }
});
export default MyImage;

로그인 후 복사

예제 2: 사용자 정의 내부의 Props component

prop를 사용하여 한 구성 요소에서 다른 구성 요소로 정보를 보낼 수 있습니다. 아래 예에서는 학생 및 주제라는 두 개의 사용자 정의 구성 요소가 생성됩니다.

테마 구성요소는 다음과 같습니다. -

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

로그인 후 복사

이 구성요소는 매개변수 props를 사용합니다. 이름을 props.name으로 표시하기 위해 텍스트 구성 요소 내에서 사용됩니다. 학생 구성 요소에서 주제 구성 요소로 속성을 전달하는 방법을 살펴보겠습니다.

student 컴포넌트는 다음과 같습니다 -

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

로그인 후 복사

Student 컴포넌트에서는 name 속성과 함께 Subject 컴포넌트가 사용됩니다. 전달되는 값은 수학, 물리학, 화학입니다. name 속성에 다른 값을 전달하면 테마를 재사용할 수 있습니다.

이것은 학생 및 주제 구성 요소와 출력을 사용한 실제 예입니다.

import React from &#39;react&#39;;
import { Text, View } from &#39;react-native&#39;;

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

로그인 후 복사