Ref

컴포넌트가 재생되는 동안 유지된다.
컴포넌트가 리렌더링 되어도 언마운트 되기 전까지 유지됨

State가 변경되면
=> 랜더링이 발생한다
=> 이때, ❗ 컴포넌트 내부 변수의 값이 초기화 된다. (Ref값은 유지된다.)

Ref가 변경되면
=> 랜더링이 발생하지 않는다.
=> 변수 값이 유지된다.

	let	State	Ref
변경 시 랜더링 발생 여부	❌	❌	⭕
랜더링 시 초기화 여부	⭕	⭕	❌
랜더링 시 화면에 변경 출력 여부	❌	⭕	⭕

import { useRef } from 'react';
const ref= useRef("값"); // {current:"값"}을 가진 객체를 반환한다.
ref.current // 👉 "값"

Ref 수정

ref.current= "수정한 값";

Ref 용도

• 저장공간 : 값이 변경 되어도 렌더링이 일어나지 않으며 렌더링이 되어도 초기화 되지 않고 값이 유지되는 저장공간
• DOM 요소의 접근 : document.querySelector() 와 유사한 역할을 해준다.

const nameInput= useRef();
<input ref={nameInput}/> 

 nameInput.current.focus();