ref는 DOM에 직접 접근해야할 때 사용된다. 이런 직접 접근이 필요한 경우는 아래와 같다.
.focus()
메소드를 사용해주면 포커스가 해당 input 입력창으로 이동된다.<script>
var goFocus = function() { $('#input').focus(); }
</script>
...
<input type="text" id="input"/>
class LetsReact extends React.Component {
// ref를 위한 변수 선언
inputRef;
...
// 커서 이동을 원할 때,
this.inputRef.focus();
render() {
return (
...
<input ref = {(c) => {this.inputRef = c;}}/>
...
);
}
}
const LetsReact = () => {
// ref를 위한 변수 선언
const inputRef = React.useRef(null);
// 커서 이동을 원할 때,
inputRef.current.focus();
return (
...
<input ref = {inputRef}/>
...
);
}
잘 보고 갑니다^^