리액트 네이티브의 특징

리액트 네이티브(React Native)는 모바일 애플리케이션을 구축하기 위한 프레임워크다.
리액트와 비슷한 방식으로 컴포넌트 기반의 UI를 설계한다.

주요 컴포넌트 및 속성

  1. View 컴포넌트
    • 설명: View는 레이아웃을 구성하는 기본 컨테이너 이다. HTML의 <div>와 유사 하다.
    • 속성: style (스타일링), onLayout (레이아웃 측정)
  2. Text 컴포넌트
    • 설명: 텍스트를 표시한다.
    • 속성: style (스타일링), numberOfLines (표시할 최대 줄 수)
  3. TextInput 컴포넌트
    • 설명: 사용자 입력을 받을 수 있는 텍스트 입력 필드이다.
    • 속성: value (입력값), onChangeText (입력값 변경 시 호출되는 함수)
  4. TouchableOpacity 컴포넌트
    • 설명: 터치 가능한 UI 요소를 만들며, 사용자가 터치했을 때 시각적인 피드백을 제공한다.
    • 속성: onPress (터치 시 호출되는 함수), style (스타일링)
  5. Alert API
    • 설명: 경고 창을 표시하는 API 이다.
    • 사용법: Alert.alert(title, message, buttons)

예제 코드

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, Alert, StyleSheet } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  // 버튼 클릭 시 호출되는 함수
  const handlePress = () => {
    Alert.alert(
      '알림',
      `입력한 텍스트: ${text}`,
      [{ text: '확인' }]
    );
  };

  return (
    <View style={styles.container}>
      {/* 텍스트 표시 */}
      <Text style={styles.title}>리액트 네이티브 예제</Text>
      
      {/* 텍스트 입력 필드 */}
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="텍스트를 입력하세요"
      />
      
      {/* 버튼 */}
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>제출</Text>
      </TouchableOpacity>
    </View>
  );
};

// 스타일 정의
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  input: {
    width: '100%',
    padding: 10,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007BFF',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
  },
});

export default App;

설명

  1. View: View 컴포넌트는 모든 다른 컴포넌트를 감싸는 컨테이너 역할을 한다. 스타일링을 통해 레이아웃을 조정할 수 있다.

  2. Text: Text 컴포넌트는 사용자에게 텍스트를 표시한다. style 속성을 사용해 폰트 크기, 색상 등을 조정할 수 있다.

  3. TextInput: 사용자 입력을 처리한다. value와 onChangeText 속성으로 입력 필드의 상태를 관리한다.

  4. TouchableOpacity: 사용자가 터치할 수 있는 버튼을 만들며, onPress 속성으로 버튼 클릭 시 호출될 함수를 지정한다.

  5. Alert API: 알림 대화상자를 표시하는 데 사용되며, Alert.alert 메서드를 통해 대화상자의 제목, 메시지 및 버튼을 설정할 수 있다.

위 방법으로 어느정도 컴포넌트와 속성에 대해 알수 있다.