Reactjs에서 후크를 사용하여 입력 태그 요소에 초점을 맞추는 방법은 무엇입니까?

Originally posted here!

reactjs에서 입력 태그 요소의 요소에 초점을 맞추려면 기본 아이디어는 입력 요소 태그에 대한 참조를 얻은 다음 렌더링 시 입력 태그 요소에 focus() 메서드를 사용하는 것입니다.

TL;DR

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  // Now We can focus the element
  // using the useLayoutEffect hook
  useLayoutEffect(() => {
    inputElementRef.current.focus();
  });

  return <input ref={inputElementRef} type="text" />;
}

설명

위의 코드는 설명이 필요 없다면 전체 작업 코드입니다.

이제 차근차근 논의해 보겠습니다.

먼저 useRef 에서 useLayoutEffect 및 react 후크를 가져오겠습니다. 이 후크를 사용하는 이유에 대해 잠시 논의하고 InputTag 라는 기능적 구성 요소도 만들 것입니다.

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {}

이제 입력 태그를 렌더링할 수 있도록 입력 태그 요소에 대해 JSX(렌더링 부분)를 작성할 수 있습니다.

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // Input tag element
  return <input type="text" />;
}

이제 useRef 후크를 사용하여 입력 태그에 대한 참조를 얻고 useRef 후크의 참조 값을 다음과 같이 입력 태그의 ref 속성에 전달해야 합니다.

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  return <input ref={inputElementRef} type="text" />; // Input tag element
}

이것이 React에서 DOM 요소에 대한 직접적인 참조를 얻는 방법입니다.

입력 태그 요소에 대한 참조를 얻었으므로 이제 페이지가 화면에 렌더링될 때 요소에 자동으로 초점을 맞추기 위해 focus() 메서드를 사용해야 합니다.
useRef 후크를 사용하여 참조된 모든 DOM 요소에는 current라는 속성이 있으며 이 속성에는 특정 DOM 요소의 전체 속성과 메서드가 있습니다. 따라서 우리의 경우 입력 태그 요소의 focus() 메서드는 inputElementRef.current.focus() 에서 액세스할 수 있습니다.
focus() 후크 내부에서 useLayoutEffect 메서드를 호출해야 합니다.

이는 useLayoutEffect 후크가 모든 상태 변경 후 실행되고 DOM 요소가 React에 의해 참조되며 모든 것이 화면에 렌더링되기 직전에 실행되기 때문입니다.

따라서 모든 것이 화면에 렌더링될 준비가 되기 직전에 useLayoutEffect 후크가 실행됩니다.

이런식으로 할 수 있는데,

// Import useRef and useLayoutEffect hooks
import { useRef, useLayoutEffect } from "react";

export default function InputTag() {
  // First Get Reference to the Input element in the DOM
  const inputElementRef = useRef();

  // Now We can focus the element
  // inside the useLayoutEffect hook
  useLayoutEffect(() => {
    inputElementRef.current.focus();
  });

  return <input ref={inputElementRef} type="text" />; // Input tag element
}

이제 입력 태그가 렌더링에 초점을 맞출 것입니다.

그게 다야! 😃

Codesandbox 에 있는 위의 코드를 참조하세요.

😃 유용하셨다면 공유해 주세요.