[React] useRef hook

useRef

javascript에서는 getElementById, querySelector 와 같이 특정 DOM을 선택할 수 있는데
react 에서는 ref를 사용하여 특정 DOM을 선택 할 때 사용한다.

ref를 사용 할 때는 useRef라는 hook을 사용한다.

 

const inputRef = useRef();

<input ref={inputRef} />

이렇게 input에 ref를 useRef()로 만든 변수명을 넣어주면 사용 가능하다.

myInput을 console.log에 출력해보면

 

console.log(inputRef)
/*
{current: HTMLInputElement}
current: <input></input>
*/

위와 같이 current에서 input이 나타나며
myInput.current를 사용하면 해당 input에 접근이 가능하다.

 

 

+ Class component

myInput = React.createRef();

클래스 컴포넌트에서는 React.createRef()를 사용한다.

 

class Test extends Component {
  inputRef = React.createRef();
  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.inputRef.current.value);
    // current.value로 value값 추출
  };
  render() {
    return (
      <div>
        <form className="add-form" onSubmit={this.onSubmit}>
          <input
            ref={this.inputRef}
            type="text"
            className="add-input"
          />
        </form>
      </div>
    );
  }
}