useRef

const ref = useRef(value)

함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다.
ref 오브젝트는 {current : value} 이렇게 생겼다(아무것도 안 넣어주면 undefined).
우리가 인자로 넣어준 초기값(value)은 ref안에 있는 current에 저장됨.


ref오브젝트는 수정이 가능해 언제든 원하는 값으로 바꿔줄 수 있다.

ref.current = "hello" // -> {current : "hello"}

반환된 ref는 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다.


그럼 언제 useRef가 사용이 될까?

1) ref는 state와 비슷하게 어떠한 값을 저장해 두는 저장공간으로 사용된다

• state 변화/변경 -> 자동으로 컴포넌트가 다시 렌더링 -> 컴포넌트 내부 변수들 초기화
  *함수형 컴포넌트는 말 그대로 함수. 리렌더링 되면 함수 다시 불려지고 내부변수들 초기화됨
• Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
  *ref.current를 변화시켜도 렌더링 되지 않아 화면에는 변화X. 하지만 state변화시키거나 해서 렌더링이 되면 {ref.current}에 변화된 ref.current값 나옴. 변화는 계속 하고 있는데 렌더링이 안 돼 화면에 반영이 안 되는거.
• state의 변화 -> 렌더링 -> 그래도 Ref값은 유지됨.
  *변경시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리
  
  

2) Ref를 통해 DOM요소에 접근해서 여러가지 일들을 할 수 있다.

useRef를 부르면 ref오브젝트를 반환. 이 오브젝트를 우리가 접그하고자 하는 요소 태그에 ref속성으로 넣어주기만 하면 해당 요소에 접근 가능.

const inputRef = useRef() // 지금 inputRef는 {current:undefined}
						  // 이제 <input>요소를 current 안에 undefined대신에 넣어줄 거다.

<input ref = {inputRef} ... /> // 이러면 inputRef는 {current : input}
							   // current 열어보면 input에 대한 모든 정보가 들어있다.