[React] onBlur와 onFocus의 차이

 

onBlur와 onFocus는 HTML 및 React에서 자주 사용하는 이벤트, 각각 요소에 포커스가 떠날 때 또는 도달할 때 발생

onBlur

• 정의: 요소에서 포커스가 떠날 때(focus out) 발생하는 이벤트.
• 주요 사용 사례:
  • 폼 검증: 사용자가 입력 필드에서 포커스를 잃었을 때 유효성을 검사.
  • 상태 저장: 사용자가 입력을 마치고 다른 요소로 이동했을 때 값을 저장.
  • 사용자 행동 추적: 특정 입력 필드를 벗어난 시점을 기록.
• 예제:

  <input
    type="text"
    onBlur={(e) => {
      console.log('Input field lost focus:', e.target.value);
    }}
  />
  

  동작: 사용자가 입력 필드에서 포커스를 잃을 때 onBlur가 호출됩니다.

---

onFocus

• 정의: 요소에 포커스가 도달할 때(focus in) 발생하는 이벤트.
• 주요 사용 사례:
  • 안내 메시지: 입력 필드에 포커스가 도달하면 힌트나 안내 메시지 표시.
  • 인터랙션 활성화: 특정 입력 필드를 선택했을 때 스타일 변경 또는 추가 기능 제공.
  • 상태 초기화: 입력 필드 클릭 시 기존 상태를 초기화.
• 예제:동작: 사용자가 입력 필드에 포커스를 얻을 때 onFocus가 호출됩니다.
• <input type="text" onFocus={(e) => { console.log('Input field got focus:', e.target.value); }} />

---

주요 차이점

특징 onBlur onFocus

발생 시점	포커스를 잃을 때	포커스를 얻을 때
주요 동작	포커스 해제 시 처리 로직 실행	포커스 시 처리 로직 실행
유용한 상황	폼 검증, 값 저장, 상태 변경	입력 안내, 상태 초기화, 스타일 변경
이벤트 순서	onFocus → 입력 → onBlur	onBlur → 다른 곳 클릭 → onFocus

---

React에서 주의 사항

1. 버블링:
   • onBlur와 onFocus는 React에서 버블링되지 않고 캡처링(capture) 방식으로 동작합니다.
   • React에서는 이를 처리하기 위해 onFocus와 onBlur를 대체하는 onFocusIn 및 onFocusOut은 제공되지 않습니다.
2. 기본 동작 차이:
   • onBlur는 기본적으로 focusout 이벤트와 유사.
   • onFocus는 기본적으로 focus 이벤트와 유사.

---

결합 사용 예시

onFocus로 힌트를 표시하고, onBlur로 유효성을 검사하는 방식으로 사용할 수 있습니다:

function InputWithValidation() {
  const [error, setError] = React.useState('');
  const [hint, setHint] = React.useState('');

  const validate = (value) => {
    if (!value) return 'This field is required';
    if (value.length < 3) return 'Minimum 3 characters required';
    return '';
  };

  return (
    <div>
      <input
        type="text"
        onFocus={() => setHint('Enter at least 3 characters')}
        onBlur={(e) => {
          setHint('');
          setError(validate(e.target.value));
        }}
      />
      {hint && <p style={{ color: 'blue' }}>{hint}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

 

동작:

• onFocus: 힌트를 표시.
• onBlur: 입력값을 검증하고 에러 메시지를 표시.