UseRef

useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook 이다 ! Ref는 참조를 뜻한다

Ref를 통해 DOM 요소에 접근이 가능하다

대표적으로 인풋요소를 클릭하지않아도 포커스를 주고싶을때 사용된다

로그인화면이 보여졌을때 아이디를 넣는 인풋을 굳이 클릭하지 않아도 자동적으로 포커스가 되어있게 해주면 바로 키보드를 사용해서 아이디를 입력할 수 있어서 편하다.

Ref를 사용하면 손쉽게 인풋요소에 접근해서 이런 작업을 할 수 있다

마치 바닐라 자바스크립트에서 document.queryselector() 비슷!!

** useState 와 useRef 차이

-state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화

-Ref의 변화 -> no렌더링 -> 변수들의 값이 유지됨

state가 변경이 되면서 렌더링이 되어도 Ref의 값은 유지된다

리엑트에서는 자식요소(DOM요소 또는 컴포넌트)에 직접 접근하기 위해 ref 속성을 제공한다.

이 ref 속성은 current 프로퍼티를 가진 객체다.

굳이 useRef 를 쓰는이유? 흠 ...
state를 이용하여 상태관리를 하면 불필요한 렌더링이 일어나고 이러한
쓸데없는 렌더링이 없는 경우를 생각해서 쓴다 이렇게는 알고 있는데 더 생각해볼 필요가 있는거 같다!

그리고! 그럼 여기서 변수에 값을 할당해서 주면 똑같은거 아니냐! 할 수도 있지만 ! 렌더링이 되는 순간 초기에 설정해둔 변수 값으로 돌아가기 때문에 useRef를 쓰는거 같다!

• Ex) Const count = useRef(1). -> count = { current : 1 }

=====
이걸 이용하여 이번 로그인 / 회원가입 페이지를 구현해 볼것이다!