[input focus] .focus(), <input autofocus/>, <input ref = { input => input && input.focus() } />

기본: element.focus(), <input autofocus/> autoFocus아님

react 간단버전: <input ref = { input =>  input && input.focus() } />

react

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

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

    useEffect(() => {
        inputReference.current?.focus();
    }, []);

    return (
        <div>
            <input ref={inputReference} />
        </div>
    );
}

react useFocus hook 버전

const FocusDemo = () => {
    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               Focus
            </button>
            <input ref={inputRef} />
        </>
    )
}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

 

<input ref={input => input && input.focus()}/>