reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다.
사용
useRef
를 사용하여 HTML 요소를 가져옵니다. 다음 코드는 button
클릭 시 input
을 포커싱하고 해제하는 예제입니다.
1 | import { useRef } from 'react'; |
typescript 사용하므로 HTMLInputElement
를 지정하였습니다. useRef
를 사용하여 HTML 요소를 가져왔지만 수정할 경우에는 HTMLInputElement
지정한 것 처럼 일반 자바스크립트를 이용합니다.
useRef()
useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 life cycle을 통해 유지될 것입니다.
일반적인 사용 사례는 자식에게 접근하는 경우입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.