input된 데이터 양방향 바인딩 또는 UseRef

useState 사용하여 입력된 데이터 관리하기

import React, { useState } from 'react';

import './ExpenseForm.css';

const ExpenseForm = (props) => {
  const [enteredTitle, setEnteredTitle] = useState('');

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };
	/**중략**/
  return (
    <form onSubmit={submitHandler}>
        <div className='new-expense__control'>
          <label>Title</label>
          <input
            type='text'
            value={enteredTitle}
            onChange={titleChangeHandler}
          />
        </div>
    </form>
  );
};

export default ExpenseForm;

input 태그의 onChange 에 달려있는 titleChangeHandler로 title을 바꾼다.
titleChangeHandler 함수 내에는 setState함수 있어서 title 바뀐다.
바뀐타이틀은 input 태그의 value의 값으로 들어간다.

useRef로 useState 대신하기

state로 값을 관리하는 대신 input에 대한 참조 ref를 사용할 수 있다.

import React, { useState } from 'react';

import './ExpenseForm.css';

const ExpenseForm = (props) => {
  const titleInputRef = useRef();
   
   
  const submitHandler = (event) =>{
    event.preventDefault();
    const enterdTitle = titleInputRef.current.value;
    /**중략**/
  }

	/**중략**/
  return (
    <form onSubmit={submitHandler}>
        <div className='new-expense__control'>
          <label>Title</label>
          <input
            type='text'
            ref={titleInputRef}
          />
        </div>
    </form>
  );
};

export default ExpenseForm;

titleChangeHandler 함수와 Input 태그 내의 양방향 바인딩 대신 ref를 사용해 더 깔끔해졌다.

ref는 렌더링 된 DOM 요소와 연결되어, input 요소를 참조한다.
그래서 ref의 값은 객체로 출력되고, [ref명].current.value로 값을 읽을 수 있다. 
ref를 통해 DOM 노드을 조작할 수 있지만 (DOM은 리액트에 의해서만 조작되어야 하므로) ref로 DOM을 조작하는 것은 바람직하지 않다. 값을 빠르게 읽고, 값을 바꾸지 않는 경우 state 대신 ref를 사용하는 것이 좋다.

state로 관리되는 컴포넌트를 리액트가 state를 제어하는 '제어컴포넌트'라고 하고 , 
ref로 값을 참조하는 위 input 컴포넌트는 '비제어 컴포넌트'라고 한다.
ref로 값에 접근하는 방식은 위의 예시에서 title.current.value = 0 을 하더라도 리액트에 의해 값이 제어되는 것이 아니라 DOM의 노드 값을 설정하는 것이다.