React Autofocus

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

const Input: React.FC<{ autoFocus?: true; label: string; id: string; type: string }> = ({
  label,
  autoFocus,
  id,
  type,
}) => {
  const input = useRef(null)
  autoFocus && useEffect(() => input.current && input.current.focus(), [input])
  return (
    <>
      <label>{label}</label>
      <input
        ref={input}
        id={id}
        type={type}
        placeholder={label}
      />
    </>
  )
}

export default Input

Cannot use autofocus? · Discussion #17213 · vercel/next.js

Bug report I cannot use autofocus by using next.js Describe the bug I want the page to autofocus on an input element when it loads, but it doesn't work To Reproduce Steps to reproduce the behav...

https://github.com/vercel/next.js/discussions/17213

🥰 react popover창에서 input에 autoFocus 적용하기

블로그야...안녕....? 근 두달만이구나....😅 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ.... 변명을 해보자면 요새 야근 지옥 + 회사 적응 기간을 거치느라 좀 정신이 없었는데, 이제부터 다시 열심히 써볼거다. 진짜루....😭 아무튼, Next.js에서 클릭시 popover(a.k.a modal)가 뜨는 search 창을 구현하면서 autoFocus, autoSelect를 적용했는데 이에 대해 정리해보려고 한다. (엄청 쉬움 주의😳) input창에 이렇게만 입력해주면 component가 마운트 된 후에 자동으로 focus가 된다.

https://velog.io/@solmii/react-popover%EC%B0%BD%EC%97%90%EC%84%9C-input%EC%97%90-autoFocus-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0