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 요소들 간에 자동으로 포커스를 이동시키는 기능을 제공합니다. 주로 여러 입력 필드가 순차적으로 작동하는 폼에서 사용될 수 있습니다.
훅은 다음과 같은 두 인터페이스를 정의하고 있습니다:
UseFocusInputProps: 이는 훅의 속성을 정의하는 인터페이스로서, 다음 두 속성을 가지고 있습니다.refs: input 요소의 ref를 담은 객체로, 각각의 입력 필드에 대한 RefObject를 포함합니다.nameList: input 태그의 name 속성을 담은 배열로, 입력 필드들의 순서를 나타냅니다.
UseFocusInputResult: 이는 훅의 반환값을 정의하는 인터페이스로서, 다음 하나의 메서드를 가지고 있습니다:focusNextInput: 현재 입력 필드의 이름을 받아 다음 입력 필드로 포커스를 이동시키는 메서드입니다.
훅의 주요 동작은 focusNextInput 메서드에서 이루어집니다. 이 메서드는 현재 입력 필드의 이름을 받아와서 해당 필드의 인덱스를 찾은 후, 다음 입력 필드의 이름을 확인하고 해당 입력 필드로 포커스를 이동시킵니다. 만약 마지막 입력 필드라면 포커스 이동이 일어나지 않습니다.
Last updated