useRef란?

리액트에서 ref object를 부르면

const ref = useRef(value)
=> {current: value}를 반환한다.

ref는 current값을 변환가능하다.

const ref = useRef("h1")
ref.current = "hello"
ref.current = "nice"

반환된 ref는 컴포넌트에 전 생애주기를 통해 유지가 됩니다.
즉 렌더링 되어도 컴포넌트 unmount 되기 전까지는 값이 유지됩니다.

useRef가 유용한 2가지 상황

1. 저장공간
   state처럼 어떠한 값을 저장하는 저장공간으로 사용된다.
   state가 변경되면 렌더링되면서 컴포넌트의 내부 변수들이 초기화 되는데,
   ref안에 값을 저장하면 값이 변경되어도 렌더링이 되지 않고 변수들의 값이 유지된다는 장점이 있어
   불필요한 렌더링을 막을 수 있고, Ref의 값은 유지가 됩니다.
   변경시 렌더링을 발생시키지 말아야하는 값을 다룰 때 편리하다.

2. DOM 요소에 접근
   대표적으로 input창을 클릭하지 않고도, focus() 포커스를 주고싶을때 사용할 수 있다.
   접근방법 : 접근하고자하는 요소에 ref속성으로 넣어주면 된다!

자동으로 focus 시킬 때 사용하기

const inputRef = useRef() //나중에 인풋 엘리먼트가 들어갈 거라 초기값을 비워준다. 
useEffect(() => {
	inputRef.current.focus();
}, [])
return(
	<input ref={inputRef} type="text" />
)

여기기까지만 하면 포커스 기본 로직.

더해서 로그인 버튼을 누르면 인풋 창에 입력한 내용이 팝업으로 뜨게 만들기

const inputRef = useRef() //나중에 인풋 엘리먼트가 들어갈 거라 초기값을 비워준다. 
useEffect(() => {
	inputRef.current.focus();
}, []);

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

return(

) ```

렌더링 수를 count 할 때 사용하기

count renderCount = useRef(1);
useEffect(() => {
	renderCount.current = renderCount.current + 1;
    console.log('렌더링 수: ', renderCount.current);
})