Published on

React Native 2단계: 상태 관리와 사용자 인터랙션

[2단계] 상태 관리와 사용자 인터랙션

1. useState, useEffect로 동적 UI 만들기

  • 웹 리액트와 똑같이 useState, useEffect 사용
import React, { useState, useEffect } from 'react';
import { Text, View, Button } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count: ${count}`);
  }, [count]);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="증가" onPress={() => setCount(count + 1)} />
    </View>
  );
}
  • useEffect는 데이터 fetch, 타이머 설정, side effect 처리 등에 사용

2. 입력폼: TextInput & Keyboard 처리

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

export default function InputBox() {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="이름을 입력하세요"
        style={{ borderWidth: 1, padding: 8 }}
      />
      <Text>입력한 값: {text}</Text>
    </View>
  );
}
  • onChangeText는 TextInput 전용 이벤트 핸들러
  • 키보드가 UI를 가리지 않게 하려면 KeyboardAvoidingView 사용

3. 터치 이벤트 핸들링

주요 터치 컴포넌트

컴포넌트특징
Button가장 기본적인 버튼
TouchableOpacity투명도 변화로 클릭 피드백
TouchableHighlight배경 강조 효과
Pressable세부 조작 가능 (onPressIn, onPressOut 등)
import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity onPress={() => alert('클릭됨')}>
  <Text>눌러봐</Text>
</TouchableOpacity>

4. Modal, Alert, ActivityIndicator

Modal

<Modal visible={modalVisible} animationType="slide">
  <Text>모달 내용</Text>
</Modal>

Alert

Alert.alert("경고", "정말 삭제할까요?", [
  { text: "취소" },
  { text: "확인", onPress: () => doDelete() }
]);

ActivityIndicator (로딩 스피너)

<ActivityIndicator size="large" color="#0000ff" />

요약

  • 상태 관리와 인터랙션은 리액트 웹과 거의 동일하지만, 이벤트 핸들링 방식과 입력 UI는 네이티브 전용 방식 사용
  • TextInput은 onChangeText, 버튼은 onPress 사용
  • 키보드, 모달, 경고창 등은 모바일 UX에 꼭 필요한 요소이므로 익숙해져야 함

심화학습

Q1. 웹에서는 input의 onChange를 쓰는데, 왜 React Native에서는 onChangeText를 쓰는 건가요?
A1. 웹의 DOM과 달리 RN에서는 입력 이벤트 구조가 다르기 때문에, 텍스트 입력은 TextInput 전용 속성인 onChangeText로만 처리할 수 있다. onChange는 이벤트 객체를 다뤄야 해서 복잡해진다.

Q2. TouchableOpacity와 Button은 어떤 기준으로 선택하나요?
A2. Button은 빠르게 배치할 땐 편하지만 커스터마이징이 제한적이다. 디자인을 직접 적용하고 싶을 땐 TouchableOpacity와 Text 조합을 많이 쓴다.

Q3. 키보드가 화면을 가리는 문제는 어떻게 해결하나요?
A3. KeyboardAvoidingView를 감싸면 키보드가 올라올 때 자동으로 화면을 밀어주는 처리를 해준다. 특히 iOS에서 중요하게 작용한다.