[React] reference 사용 방법

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다.

사용

useRef를 사용하여 HTML 요소를 가져옵니다. 다음 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useRef } from 'react';

function RefEx() {
const inputRef = useRef<HTMLInputElement>(null);
const onClick = () => {
inputRef.current?.focus();
// 5초 뒤에 focus 사라짐
setTimeout(() => {
inputRef.current?.blur;
}, 5000);
};
return (
<div>
<input ref={inputRef} type="text" placeholder="input" />
<button onClick={onClick}>click</button>
</div>
);
}

export default RefEx;

typescript 사용하므로 HTMLInputElement를 지정하였습니다. useRef를 사용하여 HTML 요소를 가져왔지만 수정할 경우에는 HTMLInputElement 지정한 것 처럼 일반 자바스크립트를 이용합니다.

useRef()

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 life cycle을 통해 유지될 것입니다.
일반적인 사용 사례는 자식에게 접근하는 경우입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.

참고

Share