[React] 특정 엘리먼트에 focus 자동으로 설정하기

개요

최근 프로젝트를 진행하면서 input이 들어간 컴포넌트들을 많이 작성했었다.
그중에서 직접 마우스를 클릭하여 입력창을 활성화 시키는 게 아닌 자동으로 focus를 주는 걸 고민하게 되었고 정리하게 되었다.

코드 작성 및 설명

import { useLayoutEffect, useRef, useState } from "react";

const useFocus = (defaultFocused = false) => {
  const ref = useRef();
  const [isFocused, setIsFocused] = useState(defaultFocused);

  useLayoutEffect(() => {
    if (!ref.current) {
      return;
    }
    const onFocus = () => setIsFocused(true);
    const onBlur = () => setIsFocused(false);
    if (isFocused) {
      ref.current.focus();
    }

    ref.current.addEventListener("focus", onFocus);
    ref.current.addEventListener("blur", onBlur);

    return () => {
      ref.current.removeEventListener("focus", onFocus);
      ref.current.removeEventListener("blur", onBlur);
    };
  }, [isFocused]);

  return { ref, isFocused, setIsFocused };
};

useFocus의 입력값에 true를 주면 랜더링 시 focus를 주게 된다.

setIsFocused는 bool 타입으로 값이 true가 됐을 때 ref를 가지고 있는 요소에 focus를 주게 된다.

isFocused는 현재 focus가 주어지고 있는지를 확인할 수 있다.