출처 https://betterprogramming.pub/react-v18-demystifying-useref-forwardref-and-useimperativehandle-feec2fc5b2f6

리액트에서 변수는 크게 세가지

1. 일반변수

값이 변경되어도 re-rendering되지 않음
re-rendering 될때 초기값이 대입됨

2. state변수

값이 변경되면 re-rendering을 함
re-rendering 되더라도 초기값이 대입되지 않음(자기값을 기억)

3. ref 객체

값이 변경되더라도 re-rendering 되지 않음
re-rendering되더라도 초기값이 대입되지 않음(자기 값을 기억)

const MyComponent = ()=>{
	let a = 10; // 일반변수
  	// re-rendering되어도 자기자신 값을 기억
  	// 자기자신이 변하면 re-rendering 시키는것
  	let [b , setB] = useState(10);
  
  	// re-rendering될때 자기 자신의 값을 기억
  	// 자기자신의 값이 수정되어도
  	// re-rendering은 안시키고 싶음
  	let c = useRef(null);
  	// 객체가 만들어진다(current라는 키값) c.current
    
   return (
     <>
       {a}
       {b}
       {c.current}
       <input ref={c} />
       <button>a버튼 클릭시 a를 1더한값으로 변경해줌</button>
       <button>b버튼 클릭시 b를 1더한값으로 변경해줌</button>
       <button>c버튼 클릭시 c를 1더한값으로 변경해줌</button>
       <h1>안녕</h1>
     </>
    );
}

a는 re-rendering이 안되는데,
b는 re-rendering이 된다(state변수가 바뀌니까)
MyComponent( ); 함수의 재실행

a = 10
b = 11(변경되기 전 값을 기억하고 있음)
추가적으로 state변수(자기값이) 변하면 re-rendering 해주는것까지

<MyComponent 컴포넌트가 리렌더링 될 때 다시 그려지는 모습>

근데 이게 불편한점이...
리렌더링되도 값을 기억하고 싶어서 state변수를 사용하는데
리렌더링하기는 싫은데?

그럴때 사용하는 함수가 useRef()
화면상에서 보여주고 싶으면 useState()
내부적으로만 값을 바꾸고 싶으면 useRef() - 하이브리드

텍스트ref={ } React에만 있는 요소(HTML에는 없다)
input 태그 안에는 value 나 checked를 가져와서 사용할 수 있다

결론

useRef는 꼭 사용하지 않아도 된다
어떻게보면 useState의 상위호환..? 단점을 보완한 함수다

비어있는 배열에 넣어주고 싶으면 ref={(el)=>{b.current.push(el)}} 함수를 사용

---

Ref 객체의 current에 태그 객체를 대입하는 방법

const ref객체이름 = useRef(null);

<h1 ref={ref객체이름}>안녕</h1>

--> ref객체이름.current에는 h1태그객체가 들어있다

Ref 객체의 current에다 배열을 만들고, 그 배열 속에 여러개의 태그 객체를 대입하는 방법

const ref객체이름 = useRef([]); // ref객체이름.current에는 비어있는배열

<h1 ref={(el)=>{ref객체이름.current.push(el)}}>안녕</h1>
<p ref={(el)=>{ref객체이름.current.push(el)}}>반가워</p>
<input ref={(el)=>{ref객체이름.current.push(el)}} />

--> ref객체이름.current에는 [ h1태그객체, p태그객체, input태그객체 ] 

자, generous하게 full file을 보여주겠다

refTest.js

// useRef 익혀보기

import { useRef, useState } from "react";

const RefTestComponent = ()=>{
  const [a , setA] = useState(0);
  const b = useRef([]);
  let c = 0;

  const showAll = ()=>{
    console.log('state변수 a : ', a);
    console.log('b.current : ', b.current);
    console.log('일반변수 c : ', c);
  }
  
  return(
    <>
      <h1>RefTest 컴포넌트입니다</h1>
      <h1>State변수 a 의 값: {a}</h1>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <input ref={(el)=>{b.current.push(el)}} type="checkbox"/>
      <button onClick={()=>{setA(a + 1)}}>state변수 변경</button>
      <button onClick={()=>{ b.current++; }}>Ref객체 속 current변경</button>
      <button onClick={()=>{ c++ }}>일반 변수 변경</button>
      <br/>
      <button onClick={showAll}>변수들 속의 값 보기</button>
    </>
  );
}

export default RefTestComponent;