리액트 네이티브 컴포넌트

리액트 네이티브에서 컴포넌트는 UI를 구성하는 기본 단위입니다. 웹의 React와 마찬가지로, 재사용 가능한 UI 조각을 만들 수 있습니다. 기본 제공 컴포넌트와 사용자 정의 컴포넌트로 나뉩니다.

주요 리액트 네이티브 컴포넌트: 역할과 주요 속성

1. View

• 역할: 레이아웃을 구성하는 가장 기본적인 컨테이너(웹의 div와 유사)
• 주요 속성
  • style: 스타일 지정 (배경색, 정렬 등)
  • children: 내부에 다른 컴포넌트 포함 가능

<View style={{ flex: 1, backgroundColor: 'white' }}>{/* ... */}</View>

2. Text

• 역할: 텍스트를 화면에 표시하는 컴포넌트
• 주요 속성
  • style: 텍스트 스타일 지정 (색상, 크기 등)
  • numberOfLines: 표시할 최대 줄 수
  • ellipsizeMode: 텍스트가 넘칠 때 처리 방식 (‘head’, ‘middle’, ‘tail’, ‘clip’)

<Text style={{ fontSize: 20 }} numberOfLines={1} ellipsizeMode="tail">
  긴 텍스트 예시
</Text>

3. Image

• 역할: 이미지를 화면에 표시하는 컴포넌트
• 주요 속성
  • source: 이미지 경로(로컬 또는 uri)
  • style: 이미지 크기, 모양 등
  • resizeMode: 이미지 크기 조절 방식 (‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)

<Image
  source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
  style={{ width: 50, height: 50 }}
  resizeMode="contain"
/>

4. ScrollView

• 역할: 스크롤이 가능한 영역을 만드는 컨테이너
• 주요 속성
  • horizontal: 가로 스크롤 여부 (true/false)
  • contentContainerStyle: 내부 컨텐츠 스타일
  • showsVerticalScrollIndicator: 세로 스크롤바 표시 여부

<ScrollView horizontal={true} contentContainerStyle={{ padding: 10 }}>
  {/* ... */}
</ScrollView>

5. TextInput

• 역할: 사용자로부터 텍스트 입력을 받는 입력 필드
• 주요 속성
  • value: 입력값(상태와 연결)
  • onChangeText: 텍스트 변경 시 호출 함수
  • placeholder: 입력 전 안내 텍스트
  • secureTextEntry: 비밀번호 입력용(가림 처리)

<TextInput value={text} onChangeText={setText} placeholder="입력하세요" secureTextEntry={false} />

6. Button

• 역할: 기본적인 버튼 UI 제공(간단한 클릭 이벤트 처리)
• 주요 속성
  • title: 버튼에 표시될 텍스트
  • onPress: 버튼 클릭 시 실행 함수
  • color: 버튼 색상 (플랫폼별 지원 다름)

<Button title="눌러보세요" onPress={() => alert('Button pressed!')} color="#841584" />

NativeWind로 Tailwind CSS 스타일 적용하기

리액트 네이티브에서 Tailwind CSS의 유틸리티 클래스를 사용하려면 NativeWind 라이브러리를 활용할 수 있습니다.

1. NativeWind 설치

npm install nativewind

또는

yarn add nativewind

2. babel 설정 추가

babel.config.js에 아래 preset을 추가해야 합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['nativewind/babel'],
};

3. 사용 예시

NativeWind를 사용하면, 웹에서 Tailwind를 쓰듯이 className prop으로 스타일을 지정할 수 있습니다.

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

const MyComponent = () => (
  <ScrollView className="bg-gray-100">
    <View className="p-5">
      <Text className="text-2xl font-bold text-blue-600">Hello, React Native + Tailwind!</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        className="w-10 h-10 my-4"
      />
      <TextInput
        placeholder="Type here..."
        className="border border-gray-300 rounded px-2 py-1 my-2"
      />
      {/* Button은 className 지원이 제한적이므로, TouchableOpacity 등으로 커스텀 가능 */}
    </View>
  </ScrollView>
);

export default MyComponent;

결론

• 리액트 네이티브 컴포넌트는 모바일 앱 UI를 쉽고 효율적으로 구성할 수 있게 해줍니다.
• NativeWind를 활용하면 Tailwind CSS의 익숙한 문법으로 빠르게 스타일링할 수 있습니다.
• 기본 컴포넌트와 사용자 정의 컴포넌트를 적절히 활용하면, 다양한 화면을 손쉽게 만들 수 있습니다.