[javascript] 리액트 네이티브에서 UI 컴포넌트 사용 방법

22 Dec 2023

javascript

리액트 네이티브는 UI 컴포넌트를 사용하여 모바일 애플리케이션을 빌드하는 매우 강력한 도구입니다. UI 컴포넌트는 사용자 화면에 표시되는 요소들을 구성하고 제어하는 데 사용됩니다. 다음은 리액트 네이티브에서 UI 컴포넌트를 사용하는 방법에 대한 안내입니다.

1. 기본 UI 컴포넌트

리액트 네이티브에는 텍스트, 이미지, 버튼, 입력 폼 등 다양한 기본 UI 컴포넌트가 포함되어 있습니다. 이러한 컴포넌트들은 매우 유용하며, 앱의 기본 구성 요소로 활용될 수 있습니다.

가령, 다음은 Text, Image, Button, TextInput 등의 기본 UI 컴포넌트를 사용하는 예입니다.

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

const MyApp = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
      <Image
        source={{uri: 'https://via.placeholder.com/150'}}
        style={{width: 150, height: 150}}
      />
      <Button
        title="Click me"
        onPress={() => alert('Button Clicked!')}
      />
      <TextInput
        placeholder="Type here"
      />
    </View>
  );
}

export default MyApp;

2. 사용자 지정 UI 컴포넌트

기본 UI 컴포넌트 외에도, 리액트 네이티브에서 사용자 지정 UI 컴포넌트를 만들어 활용할 수 있습니다. 이를 통해 반복적으로 사용되는 UI 요소들을 모듈화하고 재사용할 수 있습니다.

다음은 간단한 CustomButton 컴포넌트를 만들어 활용하는 예시입니다.

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

const CustomButton = ({ onPress, title }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

const MyApp = () => {
  return (
    <CustomButton
      title="Press me"
      onPress={() => alert('Custom Button Clicked!')}
    />
  );
}

export default MyApp;

3. 서드 파티 UI 라이브러리

때로는 기본 및 사용자 지정 UI 컴포넌트로는 충분하지 않을 수 있습니다. 이때 서드 파티 제공되는 UI 라이브러리를 활용하는 것이 유용합니다. React Native Elements, NativeBase 등이 인기 있는 선택지입니다. 이러한 라이브러리를 사용하면 더욱 풍부하고 다양한 UI 컴포넌트들을 활용할 수 있습니다.

위의 안내는 리액트 네이티브에서 UI 컴포넌트를 사용하는 방법에 대한 간략한 소개입니다. 향후 프로젝트에 맞게 적절한 UI 컴포넌트를 선택하여 적용해보세요!