[React] ref통한 input 태그 커서/포커스 조정 (class component와 hooks에서 비교)

🙋🏻‍♂️ref란?

ref는 DOM에 직접 접근해야할 때 사용된다. 이런 직접 접근이 필요한 경우는 아래와 같다.

• input / textare 등에 커서 조정
• DOM 의 크기를 가져와야 할 때
• DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때
• 외부 라이브러리 (플레이어, 차트, 캐로절 등)을 사용 할 때

🧍🏻‍♂️ html input 태그에서 커서 조정

• html에서 커서 조정하는 방법은 아래와 같다. script단에서 원하는 곳에 .focus()메소드를 사용해주면 포커스가 해당 input 입력창으로 이동된다.

<script>
  var goFocus = function() { $('#input').focus(); }
</script>
...
<input type="text" id="input"/>

🚶🏻‍♂️ class Component에서 커서 조정

class LetsReact extends React.Component {
  // ref를 위한 변수 선언 
  inputRef; 
  ...
  // 커서 이동을 원할 때,
  this.inputRef.focus();

render() {
  return (
    ...
    <input ref = {(c) => {this.inputRef = c;}}/>
    ...
  );
}
}

🏃🏻‍♂️ Hooks에서 커서 조정

const LetsReact = () => {
  // ref를 위한 변수 선언 
  const inputRef = React.useRef(null);

  //  커서 이동을 원할 때,
  inputRef.current.focus();

  return (
    ... 
    <input ref = {inputRef}/>
    ...
  );

}