useRef()

1. 예시

import React,{useRef} from 'react';
// refresh button을 눌렀을 때 input을 클릭하지 않아도 자동으로 focus 되도록!


const App = () => {
 const inputRef = useRef();
 useEffect(() => { //맨처음 실행될때 하도록
  // console.log(inputRef); // 이렇게 하면 console에 Ref 찍힘, 초기값이 없어서 {current: undefined} 나옴
  inputRef.current.focus(); //이렇게 작성하면 새로고침했을때 focus 됨
 }, []) 
  
  const login = () => {
   alert('환영합니다' ${inputRef.current.value}) //버튼 누르면 나오는 팝업창
   // ${inputRef.current.value}는 input안의 value값을 가져옴
   inputRef.current.focus(); // 버튼 누른 후에도 자동으로 input창에 focus됨
  }
 
 
 return (
 <div>
 <input ref={inputRef} type ="text" placeholder="username" />
     // 이렇게 작성하면 console에 {current: input}나옴
 <button onClick={login}>로그인</button>
 </div>
 );
};

export default App;