![[React] reference 사용 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FrhoiC%2FbtsBj7cBOtq%2FAAAAAAAAAAAAAAAAAAAAAMYxa27djPg4z4MgL67wi9MNihsI8ofMgFmojiUGXCPC%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3D%252Fd8hVNCru4Vl4J16L9132%252BEt6yM%253D)
Frontend/React2022. 10. 12. 23:52[React] reference 사용 방법
reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..