리액트 네이티브(React Native) Props 완벽 가이드: 개념부터 활용 예제까지

Props(프로퍼티, Properties)는 리액트 컴포넌트를 수정하고 조정하는 데 사용되는 속성입니다. Props 개념을 활용하면 하나의 컴포넌트를 서로 다른 매개변수와 함께 재사용할 수 있으며, 한 컴포넌트에서 다른 컴포넌트로 정보를 전달할 수도 있습니다.

ReactJS에 익숙한 개발자라면 Props 개념이 낯설지 않을 것입니다. React Native에서도 동일한 개념이 그대로 적용됩니다.

그럼 예제를 통해 Props가 무엇인지 자세히 살펴보겠습니다.

예제 1: React Native 내장 컴포넌트에서 Props 사용하기

Image 컴포넌트를 살펴보겠습니다.

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

위 코드에서 style과 source는 Image 컴포넌트의 속성, 즉 Props입니다. style Props는 너비, 높이 등 스타일을 지정하는 데 사용되고, source Props는 사용자에게 표시할 이미지의 URL을 할당하는 역할을 합니다. 이 두 가지는 모두 Image 컴포넌트에 기본으로 내장된 Props입니다.

또한 URL을 저장하는 변수를 만들어 source Props에 전달할 수도 있습니다. 아래와 같이 활용하면 코드가 더 깔끔해집니다.

let imgURI = {
    uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
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: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
    };
    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: 'stretch',
    }
});
export default MyImage;

예제 2: 사용자 정의(Custom) 컴포넌트에서 Props 사용하기

Props를 활용하면 한 컴포넌트에서 다른 컴포넌트로 정보를 전달할 수 있습니다. 아래 예제에서는 Student와 Subject라는 두 개의 사용자 정의 컴포넌트를 만들어 보겠습니다.

먼저 Subject 컴포넌트입니다.

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

Subject 컴포넌트는 매개변수로 props를 받습니다. Text 컴포넌트 내부에서 props.name 형태로 값을 참조하여 이름을 화면에 표시합니다. 이제 Student 컴포넌트에서 Subject 컴포넌트로 Props를 어떻게 전달하는지 살펴보겠습니다.

Student 컴포넌트는 다음과 같습니다.

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

Student 컴포넌트 안에서 Subject 컴포넌트가 name이라는 Props와 함께 사용되었습니다. 전달된 값은 각각 Maths, Physics, Chemistry입니다. name Props에 다른 값을 넘겨주기만 하면 Subject 컴포넌트를 얼마든지 재사용할 수 있습니다.

아래는 Student와 Subject 컴포넌트를 함께 사용한 실행 가능한 전체 코드입니다.

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

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;

실행 결과

정리

Props는 리액트 네이티브에서 컴포넌트 간 데이터를 전달하고 컴포넌트를 유연하게 재사용할 수 있게 해주는 핵심 개념입니다. 내장 컴포넌트(Image 등)에서 제공하는 Props를 활용하거나, 직접 만든 커스텀 컴포넌트에 Props를 정의하여 다양한 값으로 반복 사용할 수 있습니다. Props를 잘 활용하면 코드의 중복을 줄이고 유지보수성이 뛰어난 앱을 개발할 수 있습니다.