<React> Ref

React에서는 DOM에 직접 접근하는 것을 권장하지 않기 때문에 render 메서드에서 생성된 DOM 노드나 React element에 접근하는 방법으로 Ref를 제공합니다.

app.jsx

아래 간단한 form을 만들어보았는데요. 우리가 vanilla js에서 form에 submit event가 발생했을때 input의 value를 받아오려면 우리는 e.target.children[0].value와 같은 방법을 사용해서 input value를 받아왔겠죠. 하지만 React에서는 이러한 방식으로 접근하는 방법 대신 Ref를 제공합니다.

• inputRef
  React.createRef()를 통해 inputRef라는 멤버변수를 정의해주고 이것을 input ref property로 전달합니다.
• inputRef.current
  inputRef.current에 바로 input 요소가 담겨있기 때문에 value를 읽을수도 수정할 수도 있습니다. 한가지 주의 사항은 inputRef에 바로 담겨있지 않고 inputRef.current에 담겨있다는 점입니다.

import React, {Component} from 'react';


class App{
  inputRef = React.createRef();
  
  onSubmit = e => {
    e.preventDefault();
    console.log(inputRef.current.value);//input value
  }
  
  render(){
    return(
      <form onSubmit = {this.onSubmit}>
        <input ref={this.inputRef} type="text" />
        <button></button>
      </form>        
    );
  }
}