<input/> autoFocus 이벤트

⭐ 태그 속성 사용하기

<input autofocus/>  //페이지가 로딩될때 양식 제어에 autofocus한다.

⭐ ref는 DOM에 직접 접근해야할 때 사용된다.

- input / textarea
- DOM의 크기를 가져와야 할 때
- DOM에서 스크롤의 위치를 가져오거나 설정할때
- 외부 라이브러리를 사용 할 때

⭐ Class 컴포넌트

class App extends Component {
 constructor(props){
  super(props);
  this.inputFocus = React.createRef();
 }
 componentDidMount(){
  this.inputFocus.current.focus();
 }

 render(){
  return(
   <>
    <input ref={this.inputFocus} />
   </>
  );
 }
}

⭐ Hooks

const App = () => {
 const inputFocus = useRef();
 useEffect(() => {
  inputFocus.current.focus();
 },[]);

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

⭐ ios
ios에서는 input에 있는 autofocus을 지원하지 않는다.

const App = () => {
 return(
  <>
   <input ref={
       function(ref){
       	if(ref !== null) {
        	ref.focus()
        }
       }
      } />
  </> 
 );
}