[React] input에서 양방향 바인딩 하기

이러한 기본적인 코드가 있음.

const [age, setAge] = useState(0);
const [username, setUsername] = useState('');

const ageHandler = (event) => {
  setAge(event.target.value);
};

const usernameHandler = (event) => {
  setUsername(event.target.value);
};

// jsx
<input type="number" onChange={ageHandler} />
<input type="text" onChange={usernameHandler} />
<button type="submit" onClick={submitHandler}>click</button>

버튼 누르면 해당값 따로 저장해두고 다시 input 리셋하려고 함.

const submitHandler = (event) => {
  event.preventDefault();
  const data = {
    age: age,
    username: username
  };

  setAge(0);
  setUsername('');
}

그래서 그런 함수를 만듬. 근데 안먹힘. input에 써놓은거 그대로임.

 

1. value 추가하기

<input type="number" value={age} onChange={ageHandler} />

어려울 것없이 그냥 value를 추가해주면 된다. 그러면 알아서 서로 바인딩되서 값을 아주 리셋해줌.