React - 폼태그 처리

useRef를 사용할 수도 있고, useState 값으로 value 제어할 수도 있다.

리엑트 홈페이지에서 useState로 value 제어하는 것을 더 권장한다.

 

단, 잦은 리렌더링을 방지하기 위한 성능 최적화가 필요하다.

 

input 태그 autofocus 처리

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

function Popover() {
  const searchElement = useRef(null);
  
  ...
  
  useEffect(() => {
    if (searchElement.current) { // 할당한 DOM 요소가 불러지면
      searchElement.current.focus(); // focus
    }
  }, []);
  
  ...
  
 return(
    <input ref={searchElement} /> 
  )
}

 

 

출처

https://developer-talk.tistory.com/129

[React]input Element 포커싱 처리

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

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