📝 37. React Native 폼 처리 완전 정리 — TextInput, 키보드 처리, Formik까지

---

React Native에서 폼을 다룰 때
단순히 <TextInput />만 쓰면 될 것 같지만,
실제로는 생각보다 신경 써야 할 포인트가 많다.

• 키보드가 올라와서 입력창을 가린다
• iOS/Android 키보드 처리 방식이 다르다
• 입력값을 검증해야 한다
• 여러 입력창 간 포커스 이동이 필요하다

이번 글은 기본적인 TextInput 사용법부터
키보드 대응, 상태 관리, 유효성 검증까지 한 번에 정리한 글이다.

---

✅ 기본: TextInput 사용법

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

export default function Login() {
  const [email, setEmail] = useState('');

  return (
    <View>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="이메일을 입력하세요"
        keyboardType="email-address"
        autoCapitalize="none"
        style={{
          borderWidth: 1,
          padding: 12,
          borderRadius: 8,
        }}
      />
    </View>
  );
}

---

🧠 유용한 TextInput 속성 정리

속성	설명
placeholder	입력 전 안내 문구
keyboardType	키보드 타입 (default, email-address, numeric)
secureTextEntry	비밀번호 입력 처리
autoCapitalize	자동 대문자 설정 (none, sentences)
returnKeyType	키보드의 Enter 키 스타일
onSubmitEditing	Enter 눌렀을 때 실행되는 함수

---

📱 키보드가 입력창을 가릴 때 해결법

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  {/* 입력창들 */}
</KeyboardAvoidingView>

• KeyboardAvoidingView는 키보드가 올라올 때 뷰의 위치를 조절
• iOS와 Android의 키보드 동작이 달라서 Platform.OS 분기 처리 필요

---

🔄 여러 입력창 간 포커스 이동

const secondInputRef = useRef(null);

<TextInput
  onSubmitEditing={() => secondInputRef.current?.focus()}
/>

<TextInput
  ref={secondInputRef}
/>

• 엔터(다음) 입력 시 다음 입력창으로 포커스를 이동
• ref를 사용해 제어

---

✅ Formik + Yup으로 폼 처리 및 검증 자동화

npm install formik yup

import { Formik } from 'formik';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  email: Yup.string().email().required('이메일은 필수입니다'),
});

<Formik
  initialValues={{ email: '' }}
  validationSchema={schema}
  onSubmit={(values) => console.log(values)}
>
  {({ handleChange, handleSubmit, values, errors }) => (
    <>
      <TextInput
        value={values.email}
        onChangeText={handleChange('email')}
        placeholder="이메일"
      />
      <Text>{errors.email}</Text>

      <Button title="제출" onPress={handleSubmit} />
    </>
  )}
</Formik>

✅ 자동 유효성 검사
✅ 간단한 에러 처리
✅ handleChange, handleSubmit 등 유틸 제공

---

📝 내가 느낀 점

처음엔 TextInput만 넣으면 다 될 줄 알았는데,
실제 앱에선 키보드 가림 문제, 엔터 이동, 입력 값 유효성 등
작고 귀찮은 문제들이 UX 전체를 결정한다는 걸 느꼈다.

지금은 KeyboardAvoidingView + Formik + Yup 조합으로
폼 입력을 표준화해서 만들고 있다.

---

🧾 "모바일 UX는 폼 입력에서 갈린다. 작지만 중요하다."

---