React 사후 렌더링에서 입력 필드에 초점 맞추기

React에서는 다양한 방법을 통해 렌더링 후 입력 필드에 초점을 설정할 수 있습니다. .

한 가지 접근 방식은 문서에 제안된 대로 참조를 활용하는 것입니다. 렌더 함수(예: "nameInput") 내의 입력 필드에 참조를 할당하면 해당 DOM 노드에 액세스하고 포커스 메서드를 수동으로 호출할 수 있습니다. 그러나 이 함수를 언제 어디서 호출할지 이해하는 것이 중요합니다.

포커스 함수 호출

포커스 함수를 호출하는 가장 간단한 위치는 구성 요소의 componentDidMount 수명 주기 메서드입니다. . 이렇게 하면 구성 요소가 DOM에 마운트된 후에 포커스가 설정됩니다. 코드는 다음과 같습니다:

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    
  );
};

export default MyComponent;

자동 초점 옵션

또는 React에서 제공하는 autoFocus 소품을 활용할 수도 있습니다. 입력 필드에서 이 속성을 true로 설정하면 구성 요소가 마운트 시 자동으로 포커스를 얻습니다.

return (
  
);

JSX에서는 대소문자를 구분하지 않는 HTML 속성과 달리 속성이 autoFocus(대문자 F 사용)입니다.