RN_onBlur

📢 onBlur란?

onBlur는 React에서 입력 필드(input, textarea 등)가 포커스를 잃을 때 실행되는 이벤트 핸들러

▶️ 즉, 사용자가 입력 필드에서 다른 곳을 클릭하면 onBlur 이벤트가 발생함.

▶️ 반대로, 포커스를 얻을 때는 onFocus 이벤트가 발생함.

---

✅ 1. onBlur 기본 사용법

import React, { useState } from "react";

const InputField = () => {
  const [value, setValue] = useState("");

  const handleBlur = () => {
    console.log("입력 필드에서 포커스가 사라졌습니다!");
  };

  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
      onBlur={handleBlur} 
      placeholder="입력 후 다른 곳을 클릭해보세요" 
    />
  );
};

export default InputField;

🔹 사용자가 입력 후 다른 곳을 클릭하면 handleBlur가 실행됨
🔹 콘솔에 "입력 필드에서 포커스가 사라졌습니다!" 출력됨

---

✅ 2. onBlur 활용 예제

1️⃣ 입력 검증 (Validation)

입력 필드에서 포커스를 벗어날 때 입력값을 검증할 때 사용 가능.

import React, { useState } from "react";

const EmailInput = () => {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleBlur = () => {
    if (!email.includes("@")) {
      setError("유효한 이메일을 입력하세요.");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <input 
        type="text" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        onBlur={handleBlur} 
        placeholder="이메일 입력"
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
};

export default EmailInput;

✅ 이메일 입력 후 다른 곳을 클릭하면 @ 포함 여부를 확인해 오류 메시지 출력

---

2️⃣ 자동 저장 (Auto Save)

입력 필드에서 벗어날 때 자동 저장 기능을 구현할 때 사용 가능.

import React, { useState } from "react";

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

  const handleBlur = () => {
    console.log(`"${text}"가 저장되었습니다!`);
  };

  return (
    <input 
      type="text" 
      value={text} 
      onChange={(e) => setText(e.target.value)} 
      onBlur={handleBlur} 
      placeholder="입력 후 포커스 벗어나면 자동 저장"
    />
  );
};

export default AutoSaveInput;

✅ 사용자가 입력 후 다른 곳을 클릭하면 "입력값이 저장되었습니다!" 메시지가 콘솔에 출력됨

---

✅ 3. onBlur vs onFocus 비교

이벤트	동작
onBlur	포커스를 잃을 때 실행 (ex: 입력 필드에서 다른 곳을 클릭)
onFocus	포커스를 얻을 때 실행 (ex: 사용자가 입력 필드를 클릭)

📌 예제: onBlur와 onFocus 함께 사용

import React, { useState } from "react";

const FocusBlurExample = () => {
  const [message, setMessage] = useState("");

  return (
    <input 
      type="text" 
      placeholder="클릭하면 포커스됨"
      onFocus={() => setMessage("입력 중...")}
      onBlur={() => setMessage("포커스 해제됨")}
    />
  );
};

export default FocusBlurExample;

✅ 사용자가 입력 필드를 클릭하면 "입력 중..." 표시
✅ 다른 곳을 클릭하면 "포커스 해제됨" 표시

---

결론

• onBlur는 입력 필드가 포커스를 잃을 때 실행됨.
• 주로 입력 검증(Validation), 자동 저장(Auto Save), 폼 제출(Form Submission) 전처리 등에 활용됨.
• onBlur와 onFocus를 같이 사용하면 포커스 변화에 따른 UI 업데이트 가능.