Ref는 render()에서 생성된 DOM node나 React element에 접근할 수 있게 해준다.
일반적인 React에서의 data flow에서는 부모 컴포넌트가 자식 컴포넌트들과 상호작용하기 위한 수단이 props로 한정되어있다. 따라서 자식 컴포넌트를 수정하려면 새로운 props를 전달해서 자식 컴포넌트를 다시 렌더링해야 한다.
하지만 가끔 자식 컴포넌트를 직접 수정해야 할 때가 있을 수 있다.
focus, text 선택영역, 미디어 재생 관리
애니메이션을 직접적으로 실행시킬 때
third-party DOM 라이브러리를 React와 같이 사용할 때
(선언적으로 해결될 수 있는 문제에서는 ref사용을 지양한다.)
Ref는 React.createRef()를 통해 생성되고, ref 어트리뷰트를 통해 React element에 부착된다.
render()안에서 ref가 element에게 전달되었을 때, 그 노드를 참조할 땐 ref의 current어트리뷰트로 접근한다.
const node = myRef.current;
ref의 값은 노드의 유형에 따라 다르다.
함수형 컴포넌트에 ref를 사용할 수 있게 하려면, forwardRef를 쓰거나 클래스형 컴포넌트로 변경해야 한다.