useFocusInput

Introduction

이 훅을 사용하는 이유는 주로 복수의 입력 필드를 가진 폼(form)에서 특정 입력 필드에 데이터를 입력하고 나면 다음 입력 필드로 포커스를 자동으로 이동시키기 위함입니다. 이는 사용자 경험을 향상시키고 효율적인 데이터 입력을 도울 수 있습니다.

폼이나 입력 페이지에서 여러 개의 연관된 입력 필드가 있는 경우, 사용자가 한 필드를 작성하고 나면 다음 필드로 수동으로 이동해야 합니다. 이런 경우 사용자가 일일이 다음 필드로 이동하는 것은 번거롭고 시간 소모적일 수 있습니다. 이 훅은 이러한 일련의 작업을 자동화하여 사용자가 순서대로 입력 필드를 작성할 때 편의성을 제공합니다.

예를 들어, 전화번호를 세 부분으로 나누어 입력받는 경우(예: 국가 코드, 지역 코드, 본인 번호), 사용자가 한 부분을 입력하면 자동으로 다음 부분으로 포커스가 이동하여 순서대로 입력이 가능하도록 돕습니다.

이러한 자동 포커스 이동 기능은 특히 모바일 환경에서 키보드를 통한 입력이 많은 경우에 유용하며, 웹 애플리케이션에서 사용자가 빠르게 데이터를 입력할 수 있도록 도움을 주는 기능으로 활용될 수 있습니다.

Example

import React, { useRef } from "react";
​
function MyForm() {
  const phoneFirstRef = useRef<HTMLInputElement>(null);
  const phoneSecondRef = useRef<HTMLInputElement>(null);
  const phoneThirdRef = useRef<HTMLInputElement>(null);
  const emlAddrRef = useRef<HTMLInputElement>(null);
​
  const { focusNextInput } = useFocusInput({
    refs: {
      phoneFirst: phoneFirstRef,
      phoneSecond: phoneSecondRef,
      phoneThird: phoneThirdRef,
      emlAddr: emlAddrRef,
    },
    nameList: ["phoneFirst", "phoneSecond", "phoneThird", "emlAddr"],
  });
​
  return (
    <form>
      <input ref={phoneFirstRef} onChange={() => focusNextInput("phoneFirst")} />
      <input ref={phoneSecondRef} onChange={() => focusNextInput("phoneSecond")} />
      <input ref={phoneThirdRef} onChange={() => focusNextInput("phoneThird")} />
      <input ref={emlAddrRef} onChange={() => focusNextInput("emlAddr")} />
    </form>
  );
}

이렇게 하면 입력 필드에 글자가 채워질 때마다 자동으로 다음 입력 필드로 포커스가 이동됩니다.

Hook

import React, { RefObject } from "react";
​
/**
 * input에 글자가 다 채워지면 다음 input으로 자동 focus하도록 하는 훅
 *
 * @param {*} refs input의 ref를 담은 객체
 * @param {*} nameList input태그의 name ['phoneFirst', 'phoneSecond', 'phoneThirds', 'emlAddr']
 * @returns focusNextInput focus 이벤트를 실행할 이벤트핸들러
 */
​
interface UseFocusInputProps {
  refs: Record<string, RefObject<HTMLInputElement>>;
  nameList: string[];
}
​
interface UseFocusInputResult {
  focusNextInput: (currentInputName: string) => void;
}
​
export default function useFocusInput({ refs = {}, nameList = [] }: UseFocusInputProps): UseFocusInputResult {
  const focusNextInput = (currentInputName: string) => {
    const currentIndex = nameList.indexOf(currentInputName);
​
    if (currentIndex < nameList.length - 1) {
      const nextInputName = nameList[currentIndex + 1];
      if (refs[nextInputName] && refs[nextInputName].current) {
        refs[nextInputName].current.focus();
      }
    }
  };
​
  return { focusNextInput };
}

이 훅은 React 애플리케이션에서 사용할 수 있는 사용자 정의 훅(useFocusInput)을 정의하고 있습니다. 이 훅은 주어진 input 요소들 간에 자동으로 포커스를 이동시키는 기능을 제공합니다. 주로 여러 입력 필드가 순차적으로 작동하는 폼에서 사용될 수 있습니다.

훅은 다음과 같은 두 인터페이스를 정의하고 있습니다:

1. UseFocusInputProps: 이는 훅의 속성을 정의하는 인터페이스로서, 다음 두 속성을 가지고 있습니다.

   • refs: input 요소의 ref를 담은 객체로, 각각의 입력 필드에 대한 RefObject를 포함합니다.

   • nameList: input 태그의 name 속성을 담은 배열로, 입력 필드들의 순서를 나타냅니다.

2. UseFocusInputResult: 이는 훅의 반환값을 정의하는 인터페이스로서, 다음 하나의 메서드를 가지고 있습니다:

   • focusNextInput: 현재 입력 필드의 이름을 받아 다음 입력 필드로 포커스를 이동시키는 메서드입니다.

훅의 주요 동작은 focusNextInput 메서드에서 이루어집니다. 이 메서드는 현재 입력 필드의 이름을 받아와서 해당 필드의 인덱스를 찾은 후, 다음 입력 필드의 이름을 확인하고 해당 입력 필드로 포커스를 이동시킵니다. 만약 마지막 입력 필드라면 포커스 이동이 일어나지 않습니다.