갓난애기도 배울 수 있는 React Native 가이드 ③ – 버튼, TextInput, 이벤트 핸들링 완전정복

갓난애기도 배울 수 있는 React Native 가이드 ③ – 버튼, TextInput, 이벤트 핸들링 완전정복

드디어 앱과 사용자 사이의 “대화”가 시작됩니다!
이번 글에서는 버튼을 누르거나 텍스트를 입력하면 앱이 반응하는 기본 인터랙션을 실습해보겠습니다.
이 기능들만 있어도 간단한 계산기, 로그인 창, 메모 앱을 만들 수 있어요.

---

✅ 1. 버튼 만들기 – Button과 TouchableOpacity

✅ 가장 기본적인 버튼

import { Button } from 'react-native';

<Button
  title="눌러보세요!"
  onPress={() => alert('버튼이 눌렸습니다!')}
/>

• title: 버튼에 보일 텍스트
• onPress: 클릭 시 실행할 함수

---

✅ 더 다양한 스타일을 원한다면? TouchableOpacity

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

<TouchableOpacity
  onPress={() => alert('이 버튼도 클릭됨!')}
  style={{
    backgroundColor: '#4CAF50',
    padding: 12,
    borderRadius: 8,
  }}
>
  <Text style={{ color: 'white' }}>커스텀 버튼</Text>
</TouchableOpacity>

✅ 커스텀 버튼을 만들 때는 TouchableOpacity 또는 Pressable을 사용합니다.

---

✅ 2. 사용자 입력 받기 – TextInput

✅ 기본 사용법

import { TextInput } from 'react-native';

<TextInput
  placeholder="이름을 입력하세요"
  style={{
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 10,
    width: 200,
  }}
/>

• placeholder: 힌트 텍스트
• value: 현재 입력된 값
• onChangeText: 값이 변경될 때 호출됨

---

✅ useState와 함께 사용하기

반응형

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

const InputExample = () => {
  const [name, setName] = useState('');

  return (
    <View>
      <TextInput
        placeholder="이름 입력"
        onChangeText={(text) => setName(text)}
        value={name}
        style={{
          borderBottomWidth: 1,
          marginBottom: 12,
        }}
      />
      <Text>당신의 이름은: {name}</Text>
    </View>
  );
};

export default InputExample;

 

---

✅ 3. 실습 예제: 간단한 인사앱 만들기

📄 App.js

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

export default function App() {
  const [name, setName] = useState('');
  const [greeting, setGreeting] = useState('');

  const handlePress = () => {
    if (name.trim() === '') {
      setGreeting('이름을 입력해주세요.');
    } else {
      setGreeting(`안녕하세요, ${name}님!`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native 인사 앱</Text>
      <TextInput
        placeholder="이름을 입력하세요"
        value={name}
        onChangeText={setName}
        style={styles.input}
      />
      <Button title="인사하기" onPress={handlePress} />
      {greeting !== '' && <Text style={styles.greeting}>{greeting}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 24, marginBottom: 20 },
  input: {
    borderWidth: 1,
    width: '100%',
    padding: 10,
    marginBottom: 10,
    borderRadius: 6,
    borderColor: '#ccc',
  },
  greeting: { fontSize: 18, marginTop: 20, color: '#2b2b2b' },
});

📱 앱 동작

1. 이름을 입력하고
2. 버튼을 누르면
3. "안녕하세요, OOO님!" 출력!

---

✅ 4. 이번 글에서 배운 핵심

기능 개념

버튼 클릭	onPress
입력값 받기	TextInput + useState
상태 저장	useState()
조건에 따라 표시	{조건 && JSX} 구문

---

📘 다음 글 예고

갓난애기도 배울 수 있는 React Native 가이드 ④ – FlatList로 리스트 뿌리기 (ToDo 앱 준비)

할 일 목록처럼 반복되는 데이터를 보여주는 법을 배워봅니다.
리스트 구현은 실무에서 가장 중요한 기능 중 하나입니다!

---

 

React Native TextInput 사용법,React Native Button 예제,React Native 이벤트 핸들링,React Native 입력 처리,React Native useState 예제,React Native 사용자 입력,React Native 커스텀 버튼,React Native 기본 앱,React Native props state,React Native 인사앱 실습