[ Habit Treat Project ] React에서 input에 입력된 값 가져오기

React에서는 input에 입력된 값을 어떻게하면 가져올 수 있을까?

input태그에 값을 입력하면 state에 새로운 객체값을 하나 추가하는 로직을 구현하고 있었는데 input태그의 값을 얻어와서 처리하는 방법을 고민 중이었다.

DOM에서는 input에 입력된 값을 가져오기 위해서 아래와 같은 방법으로 값을 가져올 수 있었다.

const inputVal = document.querySelector('.input').value;

---

하지만 리액트에서는 어떻게 할 수 있을까?

Ref

React에서는 DOM 요소를 직접적으로 사용하지 않기 때문에 React에서 다른 리액트의 요소에 접근하고 싶을 때는 Ref를 사용하면 된다.

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공해준다.

아래의 공식문서에서 Ref에 대해 자세하게 살펴볼 수 있다.
https://ko.reactjs.org/docs/refs-and-the-dom.html

---

React.createRef( )

React.createRef( )를 이용해서 맴버변수를 정의한 다음에 해당하는 컴포넌트의 ref로 연결해서 사용할 수 있다.

Ref는 React.createRef( )를 통해 생성되고, ref attribute를 통해 React element에 부착된다. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 property로 추가하고, 컴포넌트의 인스턴스의 어느곳에서든 Ref로 접근할 수 있게 된다.

아래는 위의 설명에 따른 코드이다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

input의 값 가져오기

프로젝트에서 사용자가 input박스에 값을 입력하면 그 값을 읽어와서 state의 배열안에 하나의 객체를 추가해야되기 때문에 먼저 input 박스안의 value값을 가져와야됐다.

나는 form 태그 안에서 submit이 발생할 때 콜백함수안에서 처리하였다.

React.createRef( )로 inputRef를 만들어 놓고, 아래의 form 태그 에서 ref에 inputRef를 연결해주었다.
그리고, form에서 이벤트가 발생할 때 화면이 계속 새로고침되는 것이 발생해서, e.preventDefault( )로 기본 이벤트가 발생하는 것을 막고,
input 값에 사용자가 입력한 값이 잘 넘어오는 지 확인하였다.