useRef, forwardRef

useRef를 사용하는 이유:
1. focus를 주기위해
2. state를 통해 데이터를 건드리지만 ref를 써준다면 dom을 직접 거느릴수있다.
2개 차이
각각 정의
사용례

1. useRef() 는 일반적인 자바스크립트 객체입니다.
   즉 heap 영역에 저장되는 변수입니다.

2.매번 렌더링할 때 동일한 객체를 제공합니다.
heap에 저장되어 있기 때문에 어플리케이션이 종료되거나 가비지 컬렉팅될 때 까지, 참조할때마다 같은 메모리 값을 가진다고 할 수 있습니다.
3.값이 변경되어도 리렌더링이 되지 않습니다.
같은 메모리 주소를 갖고있기 때문에 자바스크립트의 === 연산이 항상 true 를 반환합니다. 즉 변경사항을 감지할 수 없어서 리렌더링을 하지 않는다는 뜻입니다.
useRef 잘 설명된글
forwardRef
부모 컴포넌트에서 자식 컴포넌트로 직접 접근하기위해 사용.

ref를 사용해야할 때
포커스, 텍스트 선택영역, 미디어의 재생을 관리할때
애니메이션을 직접 실행시킬때
서드 파티 dom라이브러리를 react와 같이 사용할 때.

선언적으로 해결될수있는 문제에선 ref사용 지양.

자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링 해야한다.
일반적인 데이터 플로우에서 벗어나 직접 자식 수정 해야하는 경우에 Ref를 씀.

useRef로 관리하는 변수는 순수 js객체를 생성하기 때문에, 매번 렌더링을 할 때 동일한 ref객체를 제공한다.
함수 컴포넌트는 ref가 존재하지 않는다

const App = () => {
  const testRef = useRef()
  return (
    <>
      {...}
      <MyComponent ref={testRef} />
	  {...}
    </>
  )
}

const MyComponent = () => { // <-forwardRef로 감싸줘야함.
  return <div />
}

함수형 컴포넌트는 인스턴스가 없어서 ref속성 사용 불가함
그래서 사용하는 것이 forwardRef
함수형 컴포넌트를 React.forwardRef()로 감싸주게되면 ref를 사용할수 있다.