리액트 autoFocus

React -> useRef /ref

Vanilla JS -> document.get~/document.query~

 <script type="text/babel">
      const App = () => {
        const inputRef = React.useRef();
        React.useEffect(() => {
          inputRef.current.focus();
        }, []);
        return (
          <>
            <input ref={inputRef} />
          </>
        );
      };
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>

새로고침시 useEffect 가 최초 실행 -> autoFocus 실행

<script type="text/bable">
	const App = () =>{
    	const inputRef = React.useRef();
        const divRef = React.useRef();
    }
    React.useEffect(()=>{
    	inputRef.current.focus();
        setTimeout(()=>{
        	divRef.current.style.backgroundColor="pink";
        },1000);
    },[]);
    return(
    	<>
        <input ref={inputRef} />
        <div ref={divRef}
        	  style ={{height:100,width:300,backgroundColor:"brown"}}
              />
        </>
    );
    };
    ReactDOM.render(<App />,document.getElementById("root"));
</script>

App 컴포넌트 import 시 return 시작 input 태그에 ref 에서 prop를 받아옴
inputRef 는 App 이 호출되면 React.useRef 에서 값 을 넘겨받음 div 마찬가지
useEffect 새로고침시 최초 한번 실행, inputRef 가 자동 포커스, 1초 지나면 divRef에 배경색상이 pink로 바뀌다