[React] useRef

useRef 유용한 두가지 상황

1. 저장공간

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지됨

2. DOM 요소에 접근

대표적으로 input 요소를 클릭하지 않아도 focus()를 주고 싶을때 사용
ex) 로그인 화면이 보여졌을때 ID를 넣는 input을 굳이 클릭하지 않아도 자동적으로 focus가 되어있게 해주면 바로 키보드를 사용해서 ID를 입력할 수 있기에 편리하다.

const inputRef = useRef();

useEffect(() => {
  // console.log(inputRef);
  inputRef.current.focus();
}, []);

const login = () => {
  alert(`환영합니다 ${inputRef.current.value}`)
  inputRef.current.focus();
}

return (
  <div>
    <input ref={inputRef} type="text" placeholder="username" />
    <button onClick={login}>로그인</button>
  </div>