RN_onSubmitEditing

📢 onSubmitEditing란?

onSubmitEditing은 React Native에서 사용되는 TextInput의 이벤트 핸들러로,
사용자가 키보드에서 "완료(Enter)" 버튼을 눌렀을 때 실행됨.

▶️ 웹에서는 onKeyPress나 onKeyDown으로 비슷한 동작을 구현하지만, React Native에서는 onSubmitEditing을 사용함.

---

✅ 1. 기본 사용법

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

const InputExample = () => {
  const [text, setText] = useState("");

  const handleSubmit = () => {
    console.log("입력값:", text);
    alert(`입력 완료: ${text}`);
  };

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}  // 입력값 업데이트
        placeholder="텍스트 입력 후 엔터"
        onSubmitEditing={handleSubmit}  // 엔터(완료 버튼) 누를 때 실행
        returnKeyType="done"  // 키보드에 "완료" 버튼 표시 (iOS)
      />
    </View>
  );
};

export default InputExample;

✅ 사용자가 TextInput에 텍스트 입력 후 "완료(Enter)" 버튼을 누르면 handleSubmit 실행

✅ returnKeyType="done"을 설정하면 iOS에서 "완료" 버튼이 표시됨

---

✅ 2. onSubmitEditing 주요 활용

1️⃣ 엔터 키 입력 시 폼 제출

import React, { useState } from "react";
import { TextInput, Button, View, Alert } from "react-native";

const LoginScreen = () => {
  const [username, setUsername] = useState("");

  const handleLogin = () => {
    Alert.alert("로그인", `사용자명: ${username}`);
  };

  return (
    <View>
      <TextInput
        value={username}
        onChangeText={setUsername}
        placeholder="사용자명 입력"
        onSubmitEditing={handleLogin}  // 엔터 누르면 로그인 시도
      />
      <Button title="로그인" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

✅ 사용자가 TextInput에 입력 후 엔터를 누르면 로그인 함수 실행

---

2️⃣ 여러 개의 입력 필드에서 다음 필드로 포커스 이동

import React, { useRef, useState } from "react";
import { TextInput, View } from "react-native";

const MultiInputForm = () => {
  const secondInputRef = useRef(null);
  const [firstValue, setFirstValue] = useState("");
  const [secondValue, setSecondValue] = useState("");

  return (
    <View>
      <TextInput
        value={firstValue}
        onChangeText={setFirstValue}
        placeholder="첫 번째 입력"
        returnKeyType="next"  // 키보드에서 "다음" 버튼 표시
        onSubmitEditing={() => secondInputRef.current.focus()}  // 엔터 누르면 다음 입력 필드로 이동
      />
      <TextInput
        ref={secondInputRef}
        value={secondValue}
        onChangeText={setSecondValue}
        placeholder="두 번째 입력"
        returnKeyType="done"  // 키보드에서 "완료" 버튼 표시
      />
    </View>
  );
};

export default MultiInputForm;

✅ 첫 번째 입력 후 엔터(완료 버튼) 누르면 두 번째 입력 필드로 자동 포커스 이동

---

✅ 3. onSubmitEditing vs onEndEditing 차이

이벤트	동작
onSubmitEditing	사용자가 엔터(완료 버튼) 를 눌렀을 때 실행
onEndEditing	사용자가 입력 필드에서 벗어났을 때(포커스 해제) 실행

📌 예제: onSubmitEditing vs onEndEditing

<TextInput
  placeholder="엔터 또는 포커스 해제 테스트"
  onSubmitEditing={() => console.log("✅ 엔터 버튼 눌림")}
  onEndEditing={() => console.log("❌ 포커스 해제됨")}
/>

✅ 엔터(완료 버튼) 누르면 "✅ 엔터 버튼 눌림" 출력
✅ 입력 필드에서 벗어나면 "❌ 포커스 해제됨" 출력

---

결론

• onSubmitEditing은 React Native에서 사용자가 "완료(Enter)" 버튼을 눌렀을 때 실행됨.

• 주요 사용 사례

  • 엔터 입력 시 폼 제출
  • 여러 입력 필드 간 자동 포커스 이동

• onEndEditing과 차이점: 포커스를 해제할 때가 아니라 엔터(완료) 버튼을 눌렀을 때만 실행됨