useRef

useRef는 리랜더링시(app을 다시 부름)에도 값이 보존된다. 하지만 숫자를 주고 카운팅 버튼을 만들어 값을 올릴 때에는 내부적으로는 숫자가 올라간다. 변수의 경우 함수가 아니므로 처음에 선언한 값으로 불려진다. let number = 0 이면 버튼으로 값을 올려도 리랜더시 결국 0임.

useRef()는 괄호안의 값으로 current 값을 갖는다.

{current : value}

Ref의 변화가 있어도 렌더링 되지 않으므로 변수들의 값이 유지됨. 또한 state의 변화로 렌더링이 일어나도 ref값이 유지되므로 저장공간으로 쓸 수있다.(렌더링을 발생시키면 안되는 값을 담음)

또한 DOM요소에 접근할 때 사용한다. id를 입력하는 input에 focus()를 줘서 커서를 사용해 클릭한 뒤 아이디를 입력할 필요가 없게 해서 유저편의성 증가 가능.

function LoginForm({~})
const emailRef = useRef();

const email = emailRef.current.value

return(
<input ref={emailRef} >
)