평소 React 내에서의 DOM 에 대한 접근 방식이 햇갈려서 다시 정리하고자 합니다.

참고문헌

https://react.dev/learn/manipulating-the-dom-with-refs

요약

• 함수 컴포넌트에서 DOM 에 접근하기 위해서 useRef 를 사용합니다

• List 와 같이 다수의 DOM 에 접근하기 위해서는 (혹은 수정이 발생하는 DOM) ref callback 함수를 통해서 유연하게 대처 가능합니다.
  (하단 문서 - How to manage a list of refs using a ref callback )

• 또 다른 함수 컴포넌트 내 DOM 에 접근하는 것은 일반적으로 React 에서는 가능하지 않습니다. 다만 필요에 따라 접근해야한다면 접근하고자 하는 컴포넌트에서 forwardRef 를 통해 허가해준다면 가능합니다.

• forwardRef 로 허가해주었지만, 필요 기능 왜에는 다른 조작을 하기 원하지 않는 경우라면
  useImperativeHandle 를 통해 원하는 기능만 제공 가능합니다
  (하단 문서 - Exposing a subset of the API with an imperative handle )