React에서의 Ref

어떤 정보를 저장하고 싶지만, 그 정보의 변경이 컴포넌트의 리렌더링을 발생시키지 않기를 원한다면, ref와 이를 다루는 훅인 useRef가 유용합니다.

Ref(또는 참조)는 읽거나 변경할 수 있는 유일한 속성 current를 가진 일반 JavaScript 객체입니다.

State와 마찬가지로, ref도 숫자, 문자열, 객체, 심지어 함수와 같은 모든 종류의 데이터를 저장할 수 있습니다.

데이터가 렌더링에 사용된다면 state에 저장하고, 리렌더링이 필요하지 않다면 ref를 사용하는 것이 더 효율적일 수 있습니다. 또한 state와 달리 ref의 값은 즉시 변경됩니다.

일반적으로 ref는 React의 방식을 벗어나서, 컴포넌트의 표시에 영향을 주지 않는 외부 API(주로 브라우저 API)와 상호작용해야 할 때 사용됩니다. 예를 들어, 타이머의 id를 저장하거나 JSX를 계산할 필요가 없는 객체를 저장하는 경우가 있지만, 가장 흔하게는 DOM 요소와의 상호작용에 사용됩니다. 포커스 제어, 텍스트 선택, 미디어 재생 등에 적용할 수 있습니다.

다음 강의에서 ref와 useRef 훅을 실전에서 다루는 방법에 대해 알아보겠습니다.