<aside> 💡 ref hook에 대해 정리를 해보려고 한다.

</aside>

1. What is Ref ???

ref는 DOM Node나 react-component에 접근할 때 쓰는 react-hook의 한 종류이다. useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다.

2. 언제 사용해야 할까 ???

1. 포커스, 텍스트 선택영역, 미디어의 재생을 관리할 때
2. 애니메이션을 직접적으로 실행시킬 때
3. 서드파티 DOM 라이브러리를 React와 함께 사용할 때

3. 어떻게 사용해야 할 수 있을까 ???

1. import {useRef} from 'react'
2. 변수로 선언 해 준다.
3. 사용하고 싶은 컴포넌트의 속성(props)으로 ref를 넘겨준다.
4. 하지만, 함수형 컴포넌트에서는 인스턴스가 없기때문에, 함수 컴포넌트에 ref속성을 사용할 수 없다. ⇒React.forwardRef 와 useImperativeHandler을 사용해주어야 한다. 기억할 것은 함수형 컴포넌트에 접근하는 것은 불가하지만, ****함수형 컴포넌트에서 DOM 엘리먼트나, 클래스 컴포넌트에 ref속성을 사용하는 것은 가능하다.
5. 선언했던 변수를 통해 자신이 하고자 했던 바를 컴포넌트에 적용시킨다.

아래는 원하는 인풋창에 포커스를 시키는 예제이다.