React - ref

Ref

• 자바스크립트의 querySelector같이 DOM을 직접 조작해야 할 때 사용하는 것이 ref(reference)이다.

state와 ref의 차이

• state는 return부분이 다시 실행됨.
• useRef는 값이 바뀌어도 return부분이 다시 실행되지 않음.

// Class
import {createRef} from 'react';
class Exer extends Component {
  inputRef = createRef(); // ref를 생성
  Onsubmit = () => {
    this.inputRef.current.focus(); // ref를 사용하는 구문
  };
  render() {
    return (
      <div>
        <input ref={this.inputRef} type='text' /> 
      </div>
    );
  }
}

// Hooks 
const Exer = () => {
  const nameInput = useRef(); // ref 선언

  const onClick = () => {
    nameInput.current.focus(); // ref 적용
  };

  return (
    <>
      <input ref={nameInput} />
      <button onClick={onClick}>클릭</button>
    </>
  );
};